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

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

/* icon button 크기 정의 */

/*
type: normal-filled, normal-tonal, normal-outlined, normal-ghost, unfilled, filled-square, filled-circle
size: small, medium, large

*/
$icon-button-sizes: (
  normal-filled: (
    small: (
      icon-size: 16px,
      button-size: 32px,
      radius: var(--radius-6, 6px),
    ),
    medium: (
      icon-size: 20px,
      button-size: 40px,
      radius: var(--radius-8, 8px),
    ),
    large: (
      icon-size: 24px,
      button-size: 48px,
      radius: var(--radius-8, 8px),
    ),
  ),
  normal-tonal: (
    small: (
      icon-size: 16px,
      button-size: 32px,
      radius: var(--radius-6, 6px),
    ),
    medium: (
      icon-size: 20px,
      button-size: 40px,
      radius: var(--radius-8, 8px),
    ),
    large: (
      icon-size: 24px,
      button-size: 48px,
      radius: var(--radius-8, 8px),
    ),
  ),
  normal-outlined: (
    small: (
      icon-size: 16px,
      button-size: 32px,
      radius: var(--radius-6, 6px),
    ),
    medium: (
      icon-size: 20px,
      button-size: 40px,
      radius: var(--radius-8, 8px),
    ),
    large: (
      icon-size: 24px,
      button-size: 48px,
      radius: var(--radius-8, 8px),
    ),
  ),
  normal-ghost: (
    small: (
      icon-size: 16px,
      button-size: 32px,
      radius: var(--radius-6, 6px),
    ),
    medium: (
      icon-size: 20px,
      button-size: 40px,
      radius: var(--radius-8, 8px),
    ),
    large: (
      icon-size: 24px,
      button-size: 48px,
      radius: var(--radius-8, 8px),
    ),
  ),
  unfilled: (
    small: (
      icon-size: 16px,
      button-size: 16px,
    ),
    medium: (
      icon-size: 24px,
      button-size: 24px,
    ),
    large: (
      icon-size: 30px,
      button-size: 30px,
    ),
  ),
  filled-square: (
    small: (
      icon-size: 16px,
      button-size: 24px,
      radius: var(--radius-4, 4px),
    ),
    medium: (
      icon-size: 20px,
      button-size: 32px,
      radius: var(--radius-6, 6px),
    ),
    large: (
      icon-size: 24px,
      button-size: 40px,
      radius: var(--radius-8, 8px),
    ),
  ),
  filled-circle: (
    small: (
      icon-size: 16px,
      button-size: 24px,
      radius: var(--radius-full, 100%),
    ),
    medium: (
      icon-size: 20px,
      button-size: 32px,
      radius: var(--radius-full, 100%),
    ),
    large: (
      icon-size: 24px,
      button-size: 40px,
      radius: var(--radius-full, 100%),
    ),
  ),
);

/**
 * 아이콘 버튼 크기 적용
 * @param {String} $type - normal-filled, normal-tonal, normal-outlined, normal-ghost, unfilled, filled-square, filled-circle
 * @param {String} $size - small, medium, large
 */
@mixin apply-icon-button-sizes($type, $size) {
  @if map.has-key($icon-button-sizes, $type) {
    // 해당 size의 맵을 가져옴
    $size-map: map.get($icon-button-sizes, $type);
    // 맵에서 값을 변수로 추출
    $size-props: map.get($size-map, $size);
    $button-size: map.get($size-props, 'button-size');
    $radius: map.get($size-props, 'radius');
    $icon-size: map.get($size-props, 'icon-size');

    width: $button-size;
    height: $button-size;
    border-radius: $radius;

    svg {
      width: $icon-size;
      height: $icon-size;
    }
  } @else {
    @warn "Unknown icon button size: #{$size}.";
  }
}
