@use 'sass:map';
@use 'functions' as *;

/* ==========================================================================
   데이터 맵 (Data Maps)
   ========================================================================== */

$normal-filled-styles: (
  base: (),
  primary: (
    background: var(--refine-accent, #006eff),
    color: var(--static-white, #fff),
    hover-color: var(--static-white, #fff),
    hover-background: hover-overlay(
        var(--refine-accent, #006eff),
        var(--interaction-surface, #4b5258),
        0.04
      ),
    active-color: var(--static-white, #fff),
    active-background: hover-overlay(
        var(--refine-accent, #006eff),
        var(--interaction-surface, #4b5258),
        0.08
      ),
  ),
  secondary: (
    background: var(--refine-senary, #f3f5f7),
    color: var(--label-primary, #29292b),
    hover-color: var(--label-primary, #29292b),
    hover-background: hover-overlay(
        var(--refine-senary, #f3f5f7),
        var(--interaction-surface, #4b5258),
        0.04
      ),
    active-color: var(--label-primary, #29292b),
    active-background: hover-overlay(
        var(--refine-senary, #f3f5f7),
        var(--interaction-surface, #4b5258),
        0.08
      ),
  ),
  tertiary: (
    background: var(--refine-primary, #171717),
    color: var(--static-white, #fff),
    hover-background: hover-overlay(
        var(--refine-primary, #171717),
        var(--interaction-surface, #4b5258),
        0.04
      ),
    active-background: hover-overlay(
        var(--refine-primary, #171717),
        var(--interaction-surface, #4b5258),
        0.08
      ),
  ),
  negative: (
    background: var(--status-negative, #f33939),
    color: var(--static-white, #fff),
    hover-background: hover-overlay(
        var(--status-negative, #f33939),
        var(--interaction-surface, #4b5258),
        0.04
      ),
    active-background: hover-overlay(
        var(--status-negative, #f33939),
        var(--interaction-surface, #4b5258),
        0.08
      ),
  ),
  disabled: (
    background: var(--interaction-disabled, rgba(56, 58, 58, 0.1)),
    color: var(--label-quinary, rgba(23, 23, 23, 0.2)),
  ),
);

// 'normal-tonal' 타입
$normal-tonal-styles: (
  base: (),
  primary: (
    color: var(--label-accent, #006eff),
    background: add-opacity(var(--static-primary, #006eff), 0.07),
    hover-color: var(--label-accent, #006eff),
    hover-background: hover-overlay(
        add-opacity(var(--static-primary, #006eff), 0.07),
        var(--static-primary, #006eff),
        0.04
      ),
    active-color: var(--label-accent, #006eff),
    active-background: hover-overlay(
        add-opacity(var(--static-primary, #006eff), 0.07),
        var(--static-primary, #006eff),
        0.08
      ),
  ),
  negative: (
    color: var(--status-negative, #f33942),
    background: add-opacity(var(--status-negative, #f33942), 0.08),
    hover-color: var(--status-negative, #f33942),
    hover-background: hover-overlay(
        add-opacity(var(--status-negative, #f33942), 0.08),
        var(--status-negative, #f33942),
        0.04
      ),
    active-color: var(--status-negative, #f33942),
    active-background: hover-overlay(
        add-opacity(var(--status-negative, #f33942), 0.08),
        var(--status-negative, #f33942),
        0.08
      ),
  ),
  disabled: (
    background: var(--interaction-disabled, rgba(56, 58, 58, 0.1)),
    color: var(--label-quinary, rgba(23, 23, 23, 0.2)),
  ),
);

// 'normal-outlined' 타입
$normal-outlined-styles: (
  base: (
    border: solid 1px,
    background: transparent,
  ),
  primary: (
    border-color: var(--line-accent, #006eff),
    color: var(--line-accent, #006eff),
    hover-color: var(--line-accent, #006eff),
    hover-background: add-opacity(var(--line-accent, #006eff), 0.04),
    active-color: var(--line-accent, #006eff),
    active-background: add-opacity(var(--line-accent, #006eff), 0.08),
  ),
  secondary: (
    border-color: var(--line-secondary, #e4e5e6),
    color: var(--label-primary, #29292b),
    hover-color: var(--label-primary, #29292b),
    hover-background: add-opacity(var(--interaction-surface, #4b5258), 0.04),
    active-color: var(--label-primary, #29292b),
    active-background: add-opacity(var(--interaction-surface, #4b5258), 0.08),
  ),
  negative: (
    border-color: var(--status-negative, #f33942),
    color: var(--status-negative, #f33942),
    hover-color: var(--status-negative, #f33942),
    hover-background: add-opacity(var(--status-negative, #f33942), 0.04),
    active-color: var(--status-negative, #f33942),
    active-background: add-opacity(var(--status-negative, #f33942), 0.08),
  ),
  disabled: (
    border-color: var(--interaction-disabled, rgba(56, 58, 58, 0.1)),
    color: var(--label-quinary, rgba(23, 23, 23, 0.2)),
  ),
);

// 'normal-ghost' 타입
$normal-ghost-styles: (
  base: (
    background: transparent,
  ),
  primary: (
    color: var(--line-accent, #006eff),
    hover-color: var(--line-accent, #006eff),
    hover-background: add-opacity(var(--line-accent, #006eff), 0.04),
    active-color: var(--line-accent, #006eff),
    active-background: add-opacity(var(--line-accent, #006eff), 0.08),
  ),
  secondary: (
    color: var(--label-primary, #29292b),
    hover-color: var(--label-primary, #29292b),
    hover-background: add-opacity(var(--interaction-surface, #4b5258), 0.04),
    active-color: var(--label-primary, #29292b),
    active-background: add-opacity(var(--interaction-surface, #4b5258), 0.08),
  ),
  negative: (
    color: var(--status-negative, #f33942),
    hover-color: var(--status-negative, #f33942),
    hover-background: add-opacity(var(--status-negative, #f33942), 0.04),
    active-color: var(--status-negative, #f33942),
    active-background: add-opacity(var(--status-negative, #f33942), 0.08),
  ),
  disabled: (
    color: var(--label-quinary, rgba(23, 23, 23, 0.2)),
  ),
);

/*
variant가 없긴 하지만 통일성을 위해 primary 하나만 사용
*/
$unfilled-styles: (
  base: (
    background: transparent,
  ),
  primary: (),
  disabled: (
    color: var(--label-quinary, rgba(23, 23, 23, 0.2)),
  ),
);

$filled-circle-styles: (
  base: (
    background: transparent,
  ),
  primary: (
    hover-background: add-opacity(var(--interaction-surface, #4b5258), 0.04),
    active-background: add-opacity(var(--interaction-surface, #4b5258), 0.08),
  ),
  secondary: (
    hover-background: add-opacity(var(--interaction-surface, #4b5258), 0.04),
    active-background: add-opacity(var(--interaction-surface, #4b5258), 0.08),
  ),
);

$filled-square-styles: (
  base: (
    background: transparent,
  ),
  primary: (
    hover-background: add-opacity(var(--interaction-surface, #4b5258), 0.04),
    active-background: add-opacity(var(--interaction-surface, #4b5258), 0.08),
  ),
);

$icon-button-types: (
  normal-filled: $normal-filled-styles,
  normal-tonal: $normal-tonal-styles,
  normal-outlined: $normal-outlined-styles,
  normal-ghost: $normal-ghost-styles,
  unfilled: $unfilled-styles,
  filled-square: $filled-square-styles,
  filled-circle: $filled-circle-styles,
);

/* ==========================================================================
   믹스인 (Mixins)
   ========================================================================== */

/**
 * variant 맵에서 값을 가져오는 헬퍼 함수
 */
@function get-style-value($type-map, $variant, $prop) {
  $variant-map: map.get($type-map, $variant);

  // variant에 값이 있으면 반환
  @if $variant-map and map.has-key($variant-map, $prop) {
    @return map.get($variant-map, $prop);
  }

  @return null;
}

/**
 * variant 맵에서 값을 가져오는 헬퍼 함수
 */
@function get-base-style-value($type-map, $prop) {
  @return map.get($type-map, 'base', $prop);
}

/**
 * 아이콘 버튼 스타일 적용 (type과 variant 기준)
 * @param {String} $type - normal-filled, normal-tonal, normal-outlined, normal-ghost, 
                           unfilled, filled-square, filled-circle
 * @param {String} $variant - primary, secondary, tertiary, negative
 */
@mixin apply-icon-button-styles($type, $variant) {
  // 1. $type이 맵에 존재하는지 확인
  @if not map.has-key($icon-button-types, $type) {
    @warn "Unknown button type: #{$type}.";
  } @else {
    $type-map: map.get($icon-button-types, $type);

    // 2. 'base' 스타일이 있다면 적용
    @if map.has-key($type-map, 'base') {
      &:not(:disabled) {
        background-color: get-base-style-value($type-map, 'background');
        color: get-base-style-value($type-map, 'color');
        border: get-base-style-value($type-map, 'border');

        &:hover {
          background-color: get-base-style-value($type-map, 'hover-background');
          color: get-base-style-value($type-map, 'hover-color');
        }

        &[data-active='true'],
        &:active {
          background-color: get-base-style-value(
            $type-map,
            'active-background'
          );
          color: get-base-style-value($type-map, 'active-color');
        }
      }
    }

    // 3. $variant가 해당 $type 맵에 존재하는지 확인
    @if not map.has-key($type-map, $variant) {
      @warn "Unknown button variant: '#{$variant}' for type '#{$type}'.";
    } @else {
      &:not(:disabled) {
        background-color: get-style-value($type-map, $variant, 'background');
        color: get-style-value($type-map, $variant, 'color');
        border-color: get-style-value($type-map, $variant, 'border-color');

        &:hover {
          background-color: get-style-value(
            $type-map,
            $variant,
            'hover-background'
          );
          color: get-style-value($type-map, $variant, 'hover-color');
        }

        &[data-active='true'],
        &:active {
          background-color: get-style-value(
            $type-map,
            $variant,
            'active-background'
          );
          color: get-style-value($type-map, $variant, 'active-color');
        }
      }
    }

    // 4. disabled 상태
    @if map.has-key($type-map, 'disabled') {
      $disabled-map: map.get($type-map, 'disabled');

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