@use 'sass:map';

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

@mixin mixed-input-border($color, $isShadowed: false) {
  @if $isShadowed == true {
    box-shadow:
      0 0 0 1px $color inset,
      0 3px 0 0 rgba(213, 205, 245, 0.4);
  } @else {
    box-shadow: 0 0 0 1px $color inset;
  }
}

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

@include b(select) {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  width: getCssVar('select-width');
  min-width: getCssVar('select-min-width');

  @include e(wrapper) {
    display: flex;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    cursor: pointer;
    text-align: left;
    font-size: map.get($input-font-size, 'small');
    padding: map.get($select-wrapper-padding, 'default') 12px;
    gap: map.get($select-item-gap, 'default');
    // height: map.get($common-component-size, 'default');
    min-height: map.get($input-height, 'default');
    line-height: map.get($select-item-height, 'default');
    border-radius: getCssVar('border-radius-small');
    background-color: getCssVar('fill-color', 'blank');
    transition: getCssVar('transition', 'duration');
    @include mixed-input-border(#{getCssVar('border-color')});

    &:hover {
      @include mixed-input-border(#{getCssVar('color-primary')}, true);
    }

    @include when(filterable) {
      cursor: text;
      overflow: hidden;

      .#{$namespace}-select__selection {
        overflow: hidden;
      }

      .#{$namespace}-select__input-wrapper {
        flex: 1 1 0;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
      }

      .#{$namespace}-select__input {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    @include when(focused) {
      @include mixed-input-border(#{getCssVar('color-primary')}, true);
    }

    @include when(hovering) {
      &:not(.is-focused) {
        @include mixed-input-border(#{getCssVar('color-primary')}, true);
      }
    }

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

      background-color: getCssVar('color-neutral-light-1');
      color: getCssVar('text-color', 'placeholder');
      @include mixed-input-border(#{getCssVar('select-disabled-border')});

      &:hover {
        @include mixed-input-border(#{getCssVar('select-disabled-border')});
      }

      &.is-focus {
        @include mixed-input-border(#{getCssVar('input-focus-border-color')});
      }

      @include e(selected-item) {
        color: getCssVar('select-disabled-color');
      }

      @include e(caret) {
        cursor: not-allowed;
      }

      @include e(selection) {
        .#{$namespace}-tag {
          cursor: not-allowed;
          @include css-var-from-global(('tag', 'bg-color'), ('color', 'neutral', 'light-2'));
          @include css-var-from-global(('tag', 'border-color'), ('color', 'neutral', 'light-4'));
          @include css-var-from-global(('tag', 'hover-color'), ('color', 'primary', 'light-5'));
          @include css-var-from-global(('tag', 'text-color'), ('color', 'neutral', 'light-4'));
        }
      }

      @include e(prefix) {
        color: getCssVar('select-disabled-color');
      }

      @include e(suffix) {
        color: getCssVar('select-disabled-color');
      }

      // Disabled filterable selects hide the input wrapper; the label lives in an
      // absolutely positioned placeholder. Reset to flex flow so ellipsis can apply.
      @include when(filterable) {
        .#{$namespace}-select__selection {
          overflow: hidden;
          flex: 1 1 auto;
          min-width: 0;
        }

        .#{$namespace}-select__placeholder {
          position: relative;
          top: auto;
          transform: none;
          width: auto;
          max-width: 100%;
          flex: 1 1 auto;
          min-width: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }

  @include e(prefix) {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: map.get($select-item-gap, 'default');
    color: var(#{getCssVarName('input-icon-color')}, map.get($input, 'icon-color'));
  }

  @include e(suffix) {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: map.get($select-item-gap, 'default');
    color: var(#{getCssVarName('input-icon-color')}, map.get($input, 'icon-color'));
  }

  @include e(caret) {
    color: getCssVar('select-input-color');
    font-size: getCssVar('select-input-font-size');
    transition: getCssVar('transition', 'duration');
    transform: rotateZ(0deg);
    cursor: pointer;

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

  @include e(selection) {
    position: relative;
    display: flex;
    // flex-wrap: wrap;
    flex-wrap: nowrap;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: map.get($select-item-gap, 'default');

    @include when(near) {
      // margin: map.get($select-near-margin-left, 'default');
    }

    .#{$namespace}-tag {
      cursor: pointer;
      // border-color: transparent;

      &.#{$namespace}-tag--plain {
        border-color: getCssVar('tag', 'border-color');
      }

      .#{$namespace}-tag__content {
        min-width: 0;
      }

      &.#{$namespace}-tag--small {
        // This is a trick. Element Plus only adds the .el-tag--small class to the tag when the size is set to 'small'.
        // So it should be set back to the default
        height: map.get($tag-height, 'default');
        line-height: map.get($tag-height, 'default') - 2px;
      }
    }
  }

  @include e(selected-item) {
    display: flex;
    flex-wrap: wrap;
    user-select: none;
    align-items: center;
    flex-shrink: 1;

    &.#{$namespace}-tooltip__trigger {
      flex-shrink: 0;
    }

    .el-tag.#{$namespace}-tag--info {
      @include css-var-from-global(('tag', 'bg-color'), ('color', 'primary', 'light-1'));
      @include css-var-from-global(('tag', 'border-color'), ('color', 'primary', 'light-4'));
      @include css-var-from-global(('tag', 'hover-color'), ('color', 'primary', 'light-5'));
      @include css-var-from-global(('tag', 'text-color'), ('color', 'primary', 'light-5'));
    }
  }

  @include e(tags-text) {
    display: block;
    line-height: normal;
    @include utils-ellipsis;
  }

  @include e(placeholder) {
    position: absolute;
    display: block;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    max-width: 100%;
    @include utils-ellipsis;
    color: var(#{getCssVarName('input-text-color')}, map.get($input, 'text-color'));
    min-width: 0;

    @include when(transparent) {
      user-select: none;
      color: getCssVar('text-color', 'placeholder');
    }
  }

  @include e(popper) {
    @include picker-popper(map.get($select-dropdown, 'bg-color'), map.get($select-dropdown, 'border'), map.get($select-dropdown, 'shadow'));
  }

  @include e(input-wrapper) {
    flex-grow: 1;
    min-width: 120px;

    input {
      //max-width: 2px !important;
      // field-sizing: content;
      min-width: 2px !important;
      width: calc(100% - 3px) !important;
    }

    @include when(hidden) {
      // Out of the document flow
      position: absolute;
      opacity: 0;
      display: none;
    }
  }

  @include e(input) {
    border: none;
    outline: none;
    padding: 0;
    color: getCssVar('select-multiple-input-color');
    font-size: inherit;
    font-family: inherit;
    appearance: none;
    height: map.get($select-item-height, 'default');
    max-width: 100%;
    background-color: transparent;

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

  @include e(input-calculator) {
    position: absolute;
    left: 0;
    top: 0;
    max-width: 100%;
    visibility: hidden;
    white-space: pre;
    overflow: hidden;
  }

  @each $size in $sizes {
    @include m($size) {
      @include e(wrapper) {
        gap: map.get($select-item-gap, $size);
        padding: map.get($select-wrapper-padding, $size) 12px;
        min-height: map.get($input-height, $size);
        // height: map.get($input-height, $size);
        line-height: map.get($select-item-height, $size);
        font-size: map.get($input-font-size, $size);
      }

      @include e(selection) {
        gap: map.get($select-item-gap, $size);

        @include when(near) {
          margin: map.get($select-near-margin-left, $size);
        }
      }

      @include e(prefix) {
        gap: map.get($select-item-gap, $size);
      }

      @include e(suffix) {
        gap: map.get($select-item-gap, $size);
      }

      @include e(input) {
        height: map.get($select-item-height, $size);
      }

      @include e(selected-item) {
        height: map.get($input-height, $size) - map.get($select-wrapper-padding, $size) * 2;
      }
    }
  }
}

@include b(select) {
  &.wrap {
    .el-select__selection {
      flex-wrap: wrap;
    }
  }
}