import { css, themeVars } from "src/types/vars";

export const primaryStyle = {
  color: themeVars.github.button.primary.fgColor.rest,
  backgroundColor: themeVars.github.button.primary.bgColor.rest,
  borderColor: themeVars.github.button.primary.borderColor.rest,
  boxShadow: themeVars.github.shadow.resting.small,
  borderRadius: "8px", // 增加圆角
};

export const primaryHoverStyle = {
  color: themeVars.github.button.primary.fgColor.rest,
  backgroundColor: themeVars.github.button.primary.bgColor.hover,
  borderColor: themeVars.github.button.primary.borderColor.hover,
  transform: "translateY(-1px)", // 添加轻微的上移效果
  boxShadow: `0 4px 12px rgba(0, 0, 0, 0.1), ${themeVars.github.shadow.resting.small}`, // 增强阴影
};

// 普通按钮和主色调按钮
export const baseButton = css`
  .ui.button {
    min-height: 30px;
    font-weight: 500;
    padding: 9px 16px;
    border-radius: 8px; // 增加圆角
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); // 添加过渡效果
    &.ui {
      gap: 8px;
    }
    // 添加点击效果
    &:active {
      animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1);
    }
  }
  .ui.button:not(.primary):not(.red) svg {
    color: ${themeVars.color.text.light.num1};
  }
  // 主色调按钮保持白色
  .ui.primary.buttons .button svg {
    color: ${themeVars.color.white};
  }
  .ui.primary {
    &.button,
    // 按钮组, PR 里的压缩合并按钮
    &.buttons .button {
      ${primaryStyle}
      &:hover {
        ${primaryHoverStyle}
      }
      &:active {
        transform: translateY(0); // 点击时回到原位
      }
    }
    // 按钮组整体有阴影
    &.buttons {
      box-shadow: ${themeVars.github.shadow.resting.small};
      .button {
        // 按钮组里的按钮无阴影
        box-shadow: none;
      }
    }
  }
  // 主色调基本按钮和普通按钮一样
  // 作者的关注按钮
  .ui.basic.primary.button {
    background-color: ${themeVars.color.button};
    color: ${themeVars.color.text.self};
    border-color: ${themeVars.color.light.border};
    box-shadow: none;
    border-radius: 8px; // 增加圆角
    &:hover {
      background-color: ${themeVars.color.hover.self};
      color: ${themeVars.color.text.self};
      border-color: ${themeVars.color.light.border};
      transform: translateY(-1px); // 添加轻微的上移效果
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); // 添加阴影
    }
    &:active {
      transform: translateY(0); // 点击时回到原位
      animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1);
    }
  }
  /* 普通按钮边框色不变 */
  .ui.basic.button,
  /* 仓库点星等数字标签按钮边框色不变 */
  .ui.labeled.button > .label {
    border-radius: 8px; // 增加圆角
    &:hover {
      border-color: ${themeVars.color.light.border};
      transform: translateY(-1px); // 添加轻微的上移效果
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); // 添加阴影
    }
    &:active {
      transform: translateY(0); // 点击时回到原位
      animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1);
    }
  }

  /* 普通按钮激活时背景色 */
  .ui.basic.buttons .button:active,
  .ui.basic.button:active,
  .ui.basic.buttons .active.button,
  .ui.basic.active.button,
  .ui.basic.buttons .active.button:hover,
  .ui.basic.active.button:hover {
    background-color: ${themeVars.github.button.default.bgColor.active};
    animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }
`;

// 红色按钮
export const redButton = css`
  .ui.red.button,
  .ui.basic.red.buttons .button,
  .ui.basic.red.button {
    color: ${themeVars.github.button.danger.fgColor.rest};
    background-color: ${themeVars.github.button.danger.bgColor.rest};
    /* 一些按钮边框色为红色, 比如危险操作区, 统一为暗色边框和 github 一致 */
    border-color: ${themeVars.color.light.border};
    border-radius: 8px; // 增加圆角

    &:hover {
      color: ${themeVars.github.button.danger.fgColor.hover};
      background-color: ${themeVars.github.button.danger.bgColor.hover};
      border-color: ${themeVars.github.button.danger.borderColor.hover};
      box-shadow: ${themeVars.github.shadow.resting.small};
      transform: translateY(-1px); // 添加轻微的上移效果
    }
    
    &:active {
      transform: translateY(0); // 点击时回到原位
      animation: pulse-click 200ms cubic-bezier(0.4, 0, 0.2, 1);
    }
  }
`;

// 修复按钮高度
export const fixButtonHeight = css`
  // 修复一些主色调或者其他小按钮的高度避免过高
  .ui.small.buttons .button,
  .ui.ui.ui.ui.small.button {
    min-height: 26px;
    height: 32px;
    border-radius: 6px; // 小按钮使用稍小的圆角
  }
  // 修复仓库页仓库操作按钮高度对齐和修正
  .repo-button-row .ui.button {
    min-height: 32px;
    border-radius: 8px; // 保持一致的圆角
  }
  // 修复因上面小按钮高度导致仓库星标克隆等按钮高度过高
  .repo-header {
    .ui.ui.ui.ui.small.compact.button,
    .ui.labeled.button > .label {
      height: 28px;
      min-height: 28px;
      border-radius: 6px; // 小按钮使用稍小的圆角
    }
  }
  .ui.ui.ui.ui.small.button.compact .ui.tiny.buttons .button,
  .ui.ui.ui.ui.tiny.button {
    min-height: 20px;
    border-radius: 4px; // 微型按钮使用更小的圆角
  }
`;

export const fixButton = css`
  // 修复关注&派生 hover 意外点亮右侧 label 左边框
  .ui.ui.ui.ui.small.button {
    z-index: 0;
  }
  // 代码复制按钮
  .ui.button.code-copy {
    padding: 4px 6px;
    min-height: 28px;
    border-radius: 6px; // 保持一致的圆角
  }
`;