@use 'sass:map';

@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

$tag-font-size: () !default;
$tag-font-size: map.merge(
  (
    'large': 16px,
    'default': 14px,
    'small': 12px,
  ),
  $tag-font-size
);

$tag-radius: () !default;
$tag-radius: map.merge(
  (
    'large': 14px,
    'default': 12px,
    'small': 10px,
  ),
  $tag-radius
);

$tag-padding: () !default;
$tag-padding: map.merge(
  (
    'large': 6px 16px,
    'default': 4px 10px,
    'small': 2px 6px,
  ),
  $tag-padding
);

$tag-icon-size: () !default;
$tag-icon-size: map.merge(
  (
    'large': 18px,
    'default': 16px,
    'small': 14px,
  ),
  $tag-icon-size
);

$tag-icon-span-gap: () !default;
$tag-icon-span-gap: map.merge(
  (
    'large': 8px,
    'default': 6px,
    'small': 4px,
  ),
  $tag-icon-span-gap
);

$input-font-size: () !default;
$input-font-size: map.merge(
  (
    'large': 18px,
    'default': 16px,
    'small': 14px,
  ),
  $input-font-size
);

$input-line-height: () !default;
$input-line-height: map.merge(
  (
    'large': 32px,
    'default': 26px,
    'small': 20px,
  ),
  $input-line-height
);

$input-padding-horizontal: () !default;
$input-padding-horizontal: map.merge(
  (
    'large': 12px,
    'default': 8px,
    'small': 4px,
  ),
  $input-padding-horizontal
);

$input-padding-vertical: () !default;
$input-padding-vertical: map.merge(
  (
    'large': 6px,
    'default': 4px,
    'small': 2px,
  ),
  $input-padding-vertical
);

$input-border-radius: () !default;
$input-border-radius: map.merge(
  (
    'large': getCssVar('border-radius-lg'),
    'default': getCssVar('border-radius-md'),
    'small': getCssVar('border-radius-sm'),
  ),
  $input-border-radius
);

@function returnVarList($var, $type: 'primary') {
  $list: ('fill-color', 'blank');
  @if $var != false {
    $list: ('color', $type, $var);
  }
  @return $list;
}
// false mean --b-color-white
@mixin genTheme($background) {
  @include css-var-from-global(('tag', 'bg-color'), returnVarList($background));

  @each $type in $types {
    &.#{bem('tag', '', $type)} {
      @include css-var-from-global(
        ('tag', 'bg-color'),
        returnVarList($background, $type)
      );
    }
  }
}

@include b(tag) {
  @include genTheme('1');

  @include css-var-from-global(('tag', 'text-color'), ('color', 'primary-4'));
  @each $type in $types {
    &.#{bem('tag', '', $type)} {
      @include css-var-from-global(
        ('tag', 'text-color'),
        ('color', #{$type}-4)
      );
    }
  }

  @include when(hit) {
    border-color: getCssVar('color', 'neutral-9');
  }
  @include when(round) {
    border-radius: 99px;
  }

  .#{$namespace}-tag__close {
    color: getCssVar('tag', 'text-color');
    &:hover {
      color: getCssVar('tag-bg-color');
      background-color: getCssVar('tag-text-color');
    }
  }

  background-color: getCssVar('tag-bg-color');
  color: getCssVar('tag-text-color');

  display: inline-flex;
  justify-content: center;
  align-items: center;

  padding: map.get($tag-padding, 'default');

  font-size: map.get($tag-font-size, 'default');
  font-weight: 600;
  line-height: map.get($tag-font-size, 'default') + 4px;
  border-radius: map.get($tag-radius, 'default');
  box-sizing: border-box;
  white-space: nowrap;

  @include set-css-var-value('icon-size', 16px);

  $svg-margin-size: 1px;

  .#{$namespace}-icon {
    border-radius: 50%;
    cursor: pointer;

    font-size: calc(#{getCssVar('icon-size')} - #{$svg-margin-size * 2});
    height: getCssVar('icon-size');
    width: getCssVar('icon-size');
  }

  .#{$namespace}-tag__close {
    margin-left: map.get($tag-icon-span-gap, 'default');
  }

  @include m(dark) {
    @include genTheme('');
    @include css-var-from-global(('tag', 'text-color'), ('color', 'white'));

    @each $type in $types {
      &.#{bem('tag', '', $type)} {
        @include css-var-from-global(('tag', 'text-color'), ('color', 'white'));
      }
    }
  }

  @include m(plain) {
    @include genTheme(false);
    @include css-var-from-global(('tag', 'bg-color'), ('fill-color', 'blank'));
  }

  &.is-closable {
    padding-right: map.get($tag-icon-span-gap, 'default');
  }

  @each $size in (large, small) {
    @include m($size) {
      padding: map.get($tag-padding, $size);
      font-size: map.get($tag-font-size, $size);
      line-height: map.get($tag-font-size, $size) + 4px;
      border-radius: map.get($tag-radius, $size);

      @include set-css-var-value(
        'icon-size',
        #{map.get($tag-icon-size, $size)}
      );

      .#{$namespace}-tag__close {
        margin-left: map.get($tag-icon-span-gap, $size);
      }

      &.is-closable {
        padding-right: map.get($tag-icon-span-gap, $size) - $border-width;
      }
    }
  }

  @include m(small) {
    .#{$namespace}-icon-close {
      transform: scale(0.8);
    }
  }

  @each $type in $types {
    &.#{bem('tag', '', $type)} {
      @include when(hit) {
        border-color: getCssVar('color', $type);
      }
    }
  }
}

@include b(tag-input) {
  display: inline-flex;
  flex-wrap: wrap;
  width: 100%;

  background-color: getCssVar('color-neutral-2');
  border: 1px solid getCssVar('color-neutral-3');
  border-radius: map.get($input-border-radius, 'default');
  transition: getCssVar('transition-box-shadow');
  padding: 0 map.get($input-padding-horizontal, 'default')
    map.get($input-padding-vertical, 'default');

  &:hover {
    // border-color: getCssVar('color-primary-3');
    // background-color: getCssVar('color-white');
    box-shadow: getCssVar('box-shadow-lv1');
  }

  @include when(focus) {
    border-color: getCssVar('color-primary-3');
    background-color: getCssVar('color-white');
    box-shadow: getCssVar('box-shadow-lv1');

    @include when(error) {
      border-color: getCssVar('color-red-4');
    }
  }

  @include when(error) {
    border-color: getCssVar('color-red-4');
  }

  @include when(rounded) {
    border-radius: getCssVar('border-radius-max');
  }

  .#{$namespace}-tag {
    background-color: getCssVar(color-neutral-3);
    color: getCssVar(color-neutral-9);
    margin-right: map.get($input-padding-vertical, 'default');
    margin-top: map.get($input-padding-vertical, 'default');

    .#{$namespace}-tag__close {
      color: getCssVar(color-neutral-9);

      margin-left: 0;

      &:hover {
        color: getCssVar(color-neutral-9);
        background-color: transparent;
      }
    }

    + .#{$namespace}-tag__textbox {
      margin-left: -4px;
    }
  }

  @include e(textbox) {
    min-width: 40px;
    flex-grow: 1;
    display: block;
    margin-top: map.get($input-padding-vertical, 'default');

    color: getCssVar('color-neutral-6');
    font-size: map.get($input-font-size, 'default');

    line-height: map.get($input-line-height, 'default');
    outline: none;
    box-sizing: border-box;
    white-space: nowrap;
    background-color: getCssVar('color-neutral-2');
    padding: 0 map.get($input-padding-horizontal, 'default');

    @include when(focus) {
      font-size: map.get($tag-font-size, 'default');
      font-weight: 600;
      color: getCssVar('color-neutral-9');
      background-color: getCssVar('color-white');
    }
  }
}