@use 'sass:list';
@use 'sass:map';
@use '../../base/token';
@use '../../abstract';
@use '../../components/link';

:root {
  --button-height-xxs: 28px;
  --button-height-xs: 32px;
  --button-height-sm: 36px;
  --button-height-md: 40px;
  --button-height-lg: 44px;
  --button-height-xl: 48px;
  --button-height-2xl: 56px;
}

$btn: (
  'primary-red': (
    'default': (
      border: var(--primary-red-500),
      bg: var(--primary-red-450),
      color: var(--base-white),
    ),
    'hover': (
      border: var(--primary-red-700),
      bg: var(--primary-red-600),
      color: var(--base-white),
    ),
    'focus': (
      border: var(--primary-red-500),
      bg: var(--primary-red-450),
      color: var(--base-white),
      shadow: var(--shadow-xs-focused-4px-primary-color-100),
    ),
    'disable': (
      border: var(--primary-red-200),
      bg: var(--primary-red-100),
      color: var(--base-white),
    ),
  ),
  'primary-black': (
    'default': (
      border: var(--gray-400),
      bg: var(--base-black),
      color: var(--base-white),
    ),
    'hover': (
      border: var(--gray-400),
      bg: var(--gray-600),
      color: var(--base-white),
    ),
    'focus': (
      border: var(--gray-400),
      bg: var(--base-black),
      color: var(--base-white),
      shadow: var(--shadow-xs-focused-4px-gray-100),
    ),
    'disable': (
      border: var(--gray-200),
      bg: var(--gray-50),
      color: var(--gray-200),
    ),
  ),
  'tertiary-gray': (
    'default': (
      bg: var(--base-white),
      color: var(--gray-700),
    ),
    'hover': (
      bg: var(--gray-50),
      color: var(--gray-700),
    ),
    'disable': (
      bg: var(--base-white),
      color: var(--base-white),
    ),
  ),
  'secondary-color': (
    'default': (
      border: var(--primary-red-200),
      bg: var(--primary-red-50),
      color: var(--primary-red-600),
    ),
    'hover': (
      border: var(--primary-red-300),
      bg: var(--primary-red-100),
      color: var(--primary-red-700),
    ),
    'focus': (
      border: var(--primary-red-200),
      bg: var(--primary-red-50),
      color: var(--primary-red-600),
      shadow: var(--shadow-xs-focused-4px-primary-color-100),
    ),
    'disable': (
      border: var(--primary-red-100),
      bg: var(--primary-red-50),
      color: var(--primary-red-300),
    ),
  ),
  'secondary-gray': (
    'default': (
      border: var(--gray-200),
      bg: var(--base-white),
      color: var(--gray-700),
    ),
    'hover': (
      border: var(--gray-200),
      bg: var(--gray-50),
      color: var(--gray-700),
    ),
    'focus': (
      border: var(--gray-200),
      bg: var(--base-white),
      color: var(--gray-700),
      shadow: var(--shadow-xs-focused-4px-gray-100),
    ),
    'disable': (
      border: var(--gray-200),
      bg: var(--base-white),
      color: var(--gray-200),
    ),
  ),
  'tertiary-color': (
    'default': (
      bg: var(--base-white),
      color: var(--blue-500),
    ),
    'hover': (
      bg: var(--blue-50),
      color: var(--blue-600),
    ),
    'disable': (
      bg: var(--base-white),
      color: var(--gray-200),
    ),
  ),
);

$btn-size: (
  'xxs': (
    pd: 5px 8px,
    font: abstract.rem(token.$font-size-0),
    height: var(--button-height-xxs),
    border-radius: 6px,
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-1),
  ),
  'xs': (
    pd: 5px 12px,
    font: abstract.rem(token.$font-size-1),
    height: var(--button-height-xs),
    border-radius: 6px,
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-1),
  ),
  'sm': (
    pd: 8px 14px,
    font: abstract.rem(token.$font-size-1),
    height: var(--button-height-sm),
    border-radius: 8px,
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2),
  ),
  'md': (
    pd: 10px 16px,
    font: abstract.rem(token.$font-size-1),
    height: var(--button-height-md),
    border-radius: 8px,
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2),
  ),
  'lg': (
    pd: 12px 18px,
    font: abstract.rem(token.$font-size-2),
    height: var(--button-height-lg),
    border-radius: 8px,
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2),
  ),
  'xl': (
    pd: 14px 20px,
    font: abstract.rem(token.$font-size-2),
    height: var(--button-height-xl),
    border-radius: 8px,
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2),
  ),
  '2xl': (
    pd: 16px 28px,
    font: abstract.rem(token.$font-size-3),
    height: var(--button-height-2xl),
    border-radius: 8px,
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2),
  ),
);

@mixin btn-theme($bg, $border, $color) {
  background-color: $bg;
  @if ($border) {
    border: 1px solid $border;
  }
  color: $color;
}

.cds-btn {
  $this: &;
  @include abstract.button-reset();

  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 8px;
  line-height: normal;
  color: inherit;

  &__label {
    pointer-events: none;
  }

  svg {
    pointer-events: none;
    stroke: currentColor;
  }

  @each $name, $info in $btn {
    &--#{$name} {
      @if ($name != 'tertiary-gray') and ($name != 'tertiary-color') {
        box-shadow: var(--shadow-xs);
      }

      @each $type, $colors in $info {
        @if $type == 'default' {
          @include btn-theme(map.get($colors, 'bg'), map.get($colors, 'border'), map.get($colors, 'color'));
        }

        @if $type == 'hover' {
          &:hover:not([disabled], .is-disable) {
            @include btn-theme(map.get($colors, 'bg'), map.get($colors, 'border'), map.get($colors, 'color'));
          }
        }

        @if $type == 'focus' {
          &:focus:not([disabled], .is-disabled) {
            @include btn-theme(map.get($colors, 'bg'), map.get($colors, 'border'), map.get($colors, 'color'));
            box-shadow: map.get($colors, 'shadow');
          }
        }

        @if $type == 'disable' {
          &:disabled,
          &.is-disable {
            @include btn-theme(map.get($colors, 'bg'), map.get($colors, 'border'), map.get($colors, 'color'));

            cursor: default;
          }
        }
      }
    }
  } // theme

  @each $size, $info in $btn-size {
    &--#{$size} {
      padding: map.get($info, 'pd');
      height: map.get($info, 'height');
      font-size: map.get($info, 'font');
      border-radius: map.get($info, 'border-radius');
      font-weight: map.get($info, 'font-weight');
    }
  }

  &.is-full {
    width: 100%;
  }

  &.is-link {
    padding: 0;
    border: 0;
    box-shadow: none;
  }

  @each $name, $info in link.$link-properties {
    &--#{$name} {
      color: map.get($info, 'default');

      &:hover,
      &:hover:not(.is-disable) {
        color: map.get($info, 'hover');
      }

      &.is-disable {
        color: map.get($info, 'disable');
        pointer-events: none;
        cursor: default;
      }
    }
  } // link size

  svg {
    flex: none;
    stroke: currentColor;
  }

  // shopby reset (button span: z-index -1)을 override 하기 위해
  span {
    z-index: 0;
  }
}

[class*='btn--link'] {
  padding: 0;
  height: auto !important;
  background-color: transparent !important;
  vertical-align: top;
  font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-1);
}

// ======================================
// only icon
// $default-gap: sm사이즈 padding 기준
// $keys-of-btn-size: $btn-keys에서 key만 추출 (type list)
// length($keys-of-btn-size) - 1: scss의 list는 첫번째 index는 1부터 시작
// ======================================
$default-gap: 8px;
$only-icon-size: var(--button-height-sm);
$only-icon-2xl: var(--button-height-2xl);
$only-icon-padding-step: 2;
$only-icon-size-step: 4px;
$keys-of-btn-size: map.keys($btn-size);

@for $i from 0 through length($keys-of-btn-size) - 1 {
  $size: nth($keys-of-btn-size, $i + 1);
  $height: map.get($btn-size, $size, 'height');

  .cds-btn--#{$size}.only-icon {
    padding: 0;
    width: $height;
  }
}

// TODO: 추후 hierarchy로 변경
.has-underline {
  text-decoration: underline;
  text-underline-offset: 2px;
}