@use 'sass:map';

@use 'mixins/mixins' as *;
@use 'mixins/utils' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@use './select-dropdown-v2.scss';
@use './option-item.scss';
@use './option-group.scss';
@use './select/common.scss' as *;

// @include b(select-v2) {
//   @include set-component-css-var('select', $select);
// }

@include b(select-v2) {
  $selector: &;

  position: relative;

  @include e(wrapper) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    box-sizing: border-box;
    cursor: pointer;
    padding: 4px 32px 4px 4px;
    background-color: getCssVar('color-neutral-2');
    border: getCssVar('border');
    border-radius: getCssVar('border-radius-md');
    transition: border-color getCssVar('transition-duration-fast')
      getCssVar('ease-in-out-bezier-function');

    &:hover {
      box-shadow: getCssVar('box-shadow-lv1');

      #{$selector}__caret {
        color: getCssVar('color-primary-3');
      }
    }

    @include when(filterable) {
      cursor: text;
    }

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

    @include when(hovering) {
      &:not(.is-focused) {
        box-shadow: getCssVar('box-shadow-lv1');
      }
    }

    @include when(disabled) {
      cursor: not-allowed;

      background-color: getCssVar('color-neutral-2');
      color: getCssVar('color-neutral-5');
      border-color: getCssVar('color-neutral-2');

      &:hover {
        box-shadow: none;
      }

      &.is-focus {
        border-color: getCssVar('color-neutral-2');
      }

      .is-transparent {
        opacity: 1;
        user-select: none;
      }

      #{$selector}__caret {
        cursor: not-allowed;
      }

      #{$selector}__combobox-input {
        cursor: not-allowed;
      }
    }

    #{$selector}__input-wrapper {
      box-sizing: border-box;
      position: relative;
      max-width: 100%;
      padding: 4px 0 4px 8px;
      overflow: hidden;
    }

    #{$selector}__input-wrapper input {
      line-height: 20px;
      height: 20px;
      min-width: 4px;
      width: 100%;

      background-color: transparent;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background: 0 0;
      border: none;

      outline: none;
      padding: 0;
    }
  }

  @include select-common(select-v2);

  @include e(empty) {
    padding: 10px 0;
    margin: 0;
    text-align: center;
    color: getCssVar('color-neutral-7');
    font-size: 14px;
  }

  @include e(popper) {
    @include picker-popper(
      getCssVar('color-white'),
      1px solid getCssVar('color-neutral-2'),
      getCssVar('box-shadow-lv2')
    );
  }

  // @each $size in (large, small) {
  //   @include m($size) {
  //     @include e(wrapper) {
  //       #{$selector}__combobox-input {
  //         height: map.get($input-height, $size) - 8px;
  //       }
  //     }
  //     @include e(caret) {
  //       height: map.get($input-height, $size);
  //     }
  //     @include e(suffix) {
  //       height: map.get($input-height, $size);
  //     }
  //     @include e(placeholder) {
  //       font-size: map.get($input-font-size, $size);
  //       line-height: map.get($input-line-height, $size);
  //     }
  //   }
  // }

  #{$selector}__selection > span {
    display: inline-block;
  }

  .#{$namespace}-select__selection-text {
    text-overflow: ellipsis;
    display: inline-block;
    overflow-x: hidden;
    vertical-align: bottom;
  }

  #{$selector}__combobox-input {
    padding-right: 32px;
    display: block;
  }

  @include e(input) {
    border: none;
    outline: none;
    padding: 0;
    color: getCssVar('color-neutral-9');
    font-size: 16px;
    appearance: none;
    height: 28px;

    @include when(small) {
      height: 14px;
    }
  }

  @include e(close) {
    cursor: pointer;
    position: absolute;
    top: 8px;
    z-index: getCssVar('index-top');
    right: 16px;
    color: getCssVar('color-neutral-7');
    line-height: 18px;
    font-size: 16px;

    &:hover {
      color: getCssVar('color-primary-3');
    }
  }

  @include e(suffix) {
    display: inline-flex;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);

    .#{$namespace}-input__icon {
      height: inherit;
    }
  }

  @include e(caret) {
    color: getCssVar('color-neutral-9');
    font-size: 16px;
    transition: transform getCssVar('transition-duration');
    transform: rotateZ(180deg);
    cursor: pointer;

    @include when(reverse) {
      transform: rotateZ(0deg);
    }

    @include when(show-close) {
      font-size: 16px;
      text-align: center;
      transform: rotateZ(180deg);
      border-radius: getCssVar('border-radius-max');
      color: getCssVar('color-neutral-9');
      transition: getCssVar('transition', 'color');

      &:hover {
        color: getCssVar('color-primary-3');
      }
    }

    &.#{$namespace}-icon {
      height: inherit;
      svg {
        vertical-align: middle;
      }
    }
  }

  @include e(selection) {
    white-space: normal;
    z-index: getCssVar('index-normal');
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  @include e(input-calculator) {
    left: 0;
    position: absolute;
    top: 0;
    visibility: hidden;
    white-space: pre;
    z-index: 999;
  }

  @include e(selected-item) {
    user-select: none;
    // using this to keep the item centered in both vertically and horizontally
    display: flex;
  }

  @include e(placeholder) {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: calc(100% - 32px);
    padding: 8px 0 8px 8px;
    @include utils-ellipsis;
    color: getCssVar('color-neutral-9');
    font-size: 16px;

    @include when(transparent) {
      color: getCssVar('color-neutral-6');
    }
  }

  .#{$namespace}-select-v2__selection .#{$namespace}-tag {
    box-sizing: border-box;
    border-color: transparent;
    margin: 2px;
    color: getCssVar('color-neutral-9');
    background-color: getCssVar('color-neutral-3');
    font-size: 12px;
    border-radius: getCssVar('border-radius-sm');

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

      &:hover {
        color: getCssVar('color-primary-3');
      }

      &::before {
        display: block;
        transform: translate(0, 0.5px);
      }
    }
  }
}