@use 'sass:map';
@use 'sass:meta';
@use 'figma' as *;
@use 'typography' as *;
@use 'functions' as *;

@forward 'icon-buttons-styles';
@forward 'icon-buttons-sizes';

$button-sizes: (
  large: (
    min-width: 84px,
    min-height: 48px,
    padding: 15px 18px,
    icon-size: 18px,
    text: label-15-sb,
    border-radius: var(--radius-8, 8px),
    gap: 6px,
  ),
  medium: (
    min-width: 70px,
    min-height: 40px,
    padding: 11.5px 14px,
    icon-size: 17px,
    text: label-14-sb,
    border-radius: var(--radius-8, 8px),
    gap: 6px,
  ),
  small: (
    min-width: 56px,
    min-height: 32px,
    padding: 8px 10px,
    icon-size: 16px,
    text: label-13-sb,
    border-radius: var(--radius-6, 6px),
    gap: 4px,
  ),
);

@mixin apply-button-size($size) {
  @if map.has-key($button-sizes, $size) {
    $size-map: map.get($button-sizes, $size);
    min-width: map.get($size-map, 'min-width');
    height: map.get($size-map, 'min-height');
    padding: map.get($size-map, padding);
    border-radius: map.get($size-map, border-radius);
    gap: map.get($size-map, gap);

    // 동적으로 typography mixin 호출
    $text-mixin-name: map.get($size-map, text);
    @include meta.apply(meta.get-mixin($text-mixin-name));

    .icon {
      width: map.get($size-map, icon-size);
      height: map.get($size-map, icon-size);
    }
  }
}

$filled-button-types: (
  primary: (
    color: var(--static-white, #fff),
    background: var(--refine-accent, #006eff),
    disabled-color: var(--label-quinary, rgba(23, 23, 23, 0.2)),
    disabled-background: var(--interaction-disabled, rgba(56, 58, 58, 0.12)),
    hovered-color: var(--static-white, #fff),
    hovered-background: hover-overlay(
        var(--refine-accent, #006eff),
        var(--interaction-surface, #4b5258),
        0.08
      ),
    activated-color: var(--static-white, #fff),
    activated-background: hover-overlay(
        var(--refine-accent, #006eff),
        var(--interaction-surface, #4b5258),
        0.12
      ),
  ),
  secondary: (
    color: var(--label-primary, #29292b),
    background: var(--refine-senary, #f3f5f7),
    disabled-color: var(--label-quinary, rgba(23, 23, 23, 0.2)),
    disabled-background: var(--interaction-disabled, rgba(56, 58, 58, 0.12)),
    hovered-color: var(--label-primary, #29292b),
    hovered-background: hover-overlay(
        var(--refine-senary, #f3f5f7),
        var(--interaction-surface, #4b5258),
        0.08
      ),
    activated-color: var(--label-primary, #29292b),
    activated-background: hover-overlay(
        var(--refine-senary, #f3f5f7),
        var(--interaction-surface, #4b5258),
        0.12
      ),
  ),
  tertiary: (
    color: var(--inverse-white, #fff),
    background: var(--refine-primary, #16181a),
    disabled-color: var(--label-quinary, rgba(23, 23, 23, 0.2)),
    disabled-background: var(--interaction-disabled, rgba(56, 58, 58, 0.12)),
    hovered-color: var(--inverse-white, #fff),
    hovered-background: hover-overlay(
        var(--refine-primary, #16181a),
        var(--inverse-white, #fff),
        0.08
      ),
    activated-color: var(--label-primary, #171717),
    activated-background: hover-overlay(
        var(--refine-primary, #16181a),
        var(--inverse-white, #fff),
        0.12
      ),
  ),
  negative: (
    color: var(--static-white, #fff),
    background: var(--status-negative, #f33939),
    disabled-color: var(--label-quinary, rgba(23, 23, 23, 0.2)),
    disabled-background: var(--interaction-disabled, rgba(56, 58, 58, 0.12)),
    hovered-color: var(--static-white, #fff),
    hovered-background: hover-overlay(
        var(--status-negative, #f33939),
        var(--interaction-surface, #4b5258),
        0.08
      ),
    activated-color: var(--static-white, #fff),
    activated-background: hover-overlay(
        var(--status-negative, #f33939),
        var(--interaction-surface, #4b5258),
        0.12
      ),
  ),
);

$tonal-button-types: (
  primary: (
    color: var(--static-primary, #006eff),
    background: hover-overlay(transparent, var(--static-primary, #006eff), 0.07),
    disabled-color: var(--label-quinary, rgba(23, 23, 23, 0.2)),
    disabled-background: var(--interaction-disabled, rgba(56, 58, 58, 0.12)),
    hovered-color: var(--static-primary, #006eff),
    hovered-background: hover-overlay(
        hover-overlay(transparent, var(--static-primary, #006eff), 0.07),
        var(--static-primary, #006eff),
        0.04
      ),
    activated-color: var(--static-primary, #006eff),
    activated-background: hover-overlay(
        hover-overlay(transparent, var(--static-primary, #006eff), 0.07),
        var(--static-primary, #006eff),
        0.08
      ),
  ),
  negative: (
    color: var(--status-negative, #f33939),
    background: hover-overlay(
        transparent,
        var(--status-negative, #f33939),
        0.08
      ),
    disabled-color: var(--status-negative, #f33939),
    disabled-background: var(--interaction-disabled, rgba(56, 58, 58, 0.12)),
    hovered-color: var(--status-negative, #f33939),
    hovered-background: hover-overlay(
        hover-overlay(transparent, var(--status-negative, #f33939), 0.08),
        var(--status-negative, #f33939),
        0.04
      ),
    activated-color: var(--status-negative, #f33939),
    activated-background: hover-overlay(
        hover-overlay(transparent, var(--status-negative, #f33939), 0.08),
        var(--status-negative, #f33939),
        0.08
      ),
  ),
);

$outlined-button-types: (
  primary: (
    color: var(--label-accent, #006eff),
    background: transparent,
    border-color: var(--line-accent, #006eff),
    disabled-color: var(--interaction-disabled, rgba(56, 58, 58, 0.12)),
    disabled-background: transparent,
    hovered-color: var(--label-accent, #006eff),
    hovered-border-color: var(--line-accent, #006eff),
    hovered-background: hover-overlay(
        transparent,
        var(--static-primary, #006eff),
        0.04
      ),
    activated-color: var(--label-accent, #006eff),
    activated-border-color: var(--line-accent, #006eff),
    activated-background: hover-overlay(
        transparent,
        var(--static-primary, #006eff),
        0.08
      ),
  ),
  secondary: (
    color: var(--label-primary, #29292b),
    background: transparent,
    border-color: var(--line-secondary, #e4e5e6),
    disabled-color: var(--interaction-disabled, rgba(56, 58, 58, 0.12)),
    disabled-background: transparent,
    hovered-color: var(--label-primary, #29292b),
    hovered-border-color: var(--line-secondary, #e4e5e6),
    hovered-background: hover-overlay(
        transparent,
        var(--interaction-surface),
        0.04
      ),
    activated-color: var(--label-primary, #29292b),
    activated-border-color: var(--line-secondary, #e4e5e6),
    activated-background: hover-overlay(
        transparent,
        var(--interaction-surface),
        0.08
      ),
  ),
  negative: (
    color: var(--status-negative, #f33942),
    background: transparent,
    border-color: var(--status-negative, #f33942),
    disabled-color: var(--interaction-disabled, rgba(56, 58, 58, 0.12)),
    disabled-background: transparent,
    hovered-color: var(--status-negative, #f33942),
    hovered-border-color: var(--status-negative, #f33942),
    hovered-background: hover-overlay(
        transparent,
        var(--status-negative, #f33942),
        0.04
      ),
    activated-color: var(--status-negative, #f33942),
    activated-border-color: var(--status-negative, #f33942),
    activated-background: hover-overlay(
        transparent,
        var(--status-negative, #f33942),
        0.08
      ),
  ),
);

$ghost-button-types: (
  primary: (
    color: var(--static-primary, #006eff),
    background: transparent,
    disabled-color: var(--label-quinary, rgba(23, 23, 23, 0.2)),
    hovered-color: var(--static-primary, #006eff),
    hovered-background: hover-overlay(
        transparent,
        var(--static-primary, #006eff),
        0.08
      ),
    activated-color: var(--static-primary, #006eff),
    activated-background: hover-overlay(
        transparent,
        var(--static-primary, #006eff),
        0.12
      ),
  ),
  secondary: (
    color: var(--label-primary, #171717),
    background: transparent,
    disabled-color: var(--label-quinary, rgba(23, 23, 23, 0.2)),
    hovered-color: var(--label-primary, #171717),
    hovered-background: hover-overlay(
        transparent,
        var(--interaction-surface),
        0.08
      ),
    activated-color: var(--label-primary, #171717),
    activated-background: hover-overlay(
        transparent,
        var(--interaction-surface),
        0.12
      ),
  ),
  negative: (
    color: var(--status-negative, #f33939),
    background: transparent,
    hovered-color: var(--status-negative, #f33939),
    hovered-background: hover-overlay(
        transparent,
        var(--status-negative, #f33939),
        0.08
      ),
    activated-color: var(--status-negative, #f33939),
    activated-background: hover-overlay(
        transparent,
        var(--status-negative, #f33939),
        0.12
      ),
  ),
);

$button-types: (
  filled: $filled-button-types,
  tonal: $tonal-button-types,
  outlined: $outlined-button-types,
  ghost: $ghost-button-types,
);

// 버튼 스타일 적용 함수
@mixin apply-button-styles($type, $variant) {
  @if map.has-key($button-types, $type) {
    $type-map: map.get($button-types, $type);
    @if map.has-key($type-map, $variant) {
      $values: map.get($type-map, $variant);
      &:not(:disabled) {
        color: map.get($values, 'color');
        background-color: map.get($values, background);

        &:hover {
          color: map.get($values, hovered-color);
          background-color: map.get($values, hovered-background);
        }

        &[data-active='true'],
        &:active {
          color: map.get($values, activated-color);
          background-color: map.get($values, activated-background);
        }

        @if $type == outlined {
          border: 1px solid map.get($values, border-color);
          &:hover {
            border-color: map.get($values, hovered-border-color);
          }

          &[data-active='true'],
          &:active {
            border-color: map.get($values, activated-border-color);
          }
        }
      }

      &:disabled {
        color: map.get($values, disabled-color);
        background-color: map.get($values, disabled-background);

        @if $type == outlined {
          border: 1px solid map.get($values, disabled-color);
        }
      }
    }
  }
}

// text 버튼은 스타일이 다름

$text-button-sizes: (
  large: (
    min-height: 18px,
    padding: 6px,
    icon-size: 18px,
    text: label-15-sb,
    border-radius: var(--radius-8, 8px),
    gap: 6px,
  ),
  medium: (
    min-height: 17px,
    padding: 6px,
    icon-size: 17px,
    text: label-14-sb,
    border-radius: var(--radius-8, 8px),
    gap: 6px,
  ),
  small: (
    min-height: 16px,
    padding: 6px,
    icon-size: 16px,
    text: label-13-sb,
    border-radius: var(--radius-6, 6px),
    gap: 4px,
  ),
);

$text-button-types: (
  primary: (
    color: var(--static-primary, #006eff),
    background: transparent,
    disabled-color: var(--label-quinary, rgba(23, 23, 23, 0.2)),
    hovered-color: var(--static-primary, #006eff),
    hovered-background: hover-overlay(
        transparent,
        var(--interaction-blue, #6a829a),
        0.04
      ),
    activated-color: var(--static-primary, #006eff),
    activated-background: hover-overlay(
        transparent,
        var(--interaction-blue, #6a829a),
        0.08
      ),
  ),
  secondary: (
    color: var(--label-primary, #171717),
    background: transparent,
    disabled-color: var(--label-quinary, rgba(23, 23, 23, 0.2)),
    hovered-color: var(--label-primary, #171717),
    hovered-background: hover-overlay(
        transparent,
        var(--interaction-blue, #6a829a),
        0.04
      ),
    activated-color: var(--label-primary, #171717),
    activated-background: hover-overlay(
        transparent,
        var(--interaction-blue, #6a829a),
        0.08
      ),
  ),
  negative: (
    color: var(--status-negative, #f33939),
    background: transparent,
    hovered-color: var(--status-negative, #f33939),
    hovered-background: hover-overlay(
        transparent,
        var(--interaction-surface, #4b5258),
        0.04
      ),
    activated-color: var(--status-negative, #f33939),
    activated-background: hover-overlay(
        transparent,
        var(--interaction-surface, #4b5258),
        0.08
      ),
  ),
);

@mixin text-button-styles($variant, $size) {
  position: relative;
  overflow: visible;
  @if map.has-key($text-button-types, $variant) {
    $type-map: map.get($text-button-types, $variant);
    @if map.has-key($text-button-sizes, $size) {
      $size-map: map.get($text-button-sizes, $size);
      gap: map.get($size-map, gap);

      $text-mixin-name: map.get($size-map, text);
      @include meta.apply(meta.get-mixin($text-mixin-name));

      &:not(:disabled) {
        color: map.get($type-map, 'color');
        background-color: map.get($type-map, 'background');

        &::before {
          content: '';
          position: absolute;
          padding: map.get($size-map, 'padding');
          height: map.get($size-map, 'min-height');
          width: 100%;
          border-radius: map.get($size-map, 'border-radius');
        }

        &:hover {
          color: map.get($type-map, hovered-color);
          &::before {
            background-color: map.get($type-map, hovered-background);
          }
        }

        &[data-active='true'],
        &:active {
          color: map.get($type-map, activated-color);
          &::before {
            background-color: map.get($type-map, activated-background);
          }
        }
      }

      &:disabled {
        color: map.get($type-map, disabled-color);
        background-color: map.get($type-map, disabled-background);
      }
    }
  }
}
