@use '@style/theme/index.scss' as theme;
@use 'sass:string';
@use 'sass:map';
@use 'sass:meta';
@use '@components/auto-complete/style/token.scss' as token;
@use '@components/auto-complete/style/token.scss' as *;

$auto-complete-prefix-cls: string.unquote('#{theme.$prefix}-autocomplete');
$select-prefix-cls: string.unquote('#{theme.$prefix}-select');

@function _str-replace-all($string, $search, $replace) {
  $index: string.index($string, $search);

  @if not $index {
    @return $string;
  }

  $before: string.slice($string, 1, $index - 1);
  $after: string.slice($string, $index + string.length($search));

  @return $before + $replace + _str-replace-all($after, $search, $replace);
}

@function token-var($name, $fallback: null) {
  $vars: meta.module-variables('token');
  $value: map.get($vars, $name);

  @if $value == null {
    // meta.module-variables() exposes token names normalized to hyphens, while
    // the source looks them up with underscores (e.g. 'color-text_disabled').
    // map.get() compares keys as exact strings, so normalize before retrying.
    $value: map.get($vars, _str-replace-all($name, '_', '-'));
  }

  @if $value == null {
    @return $fallback;
  }

  @return $value;
}

.#{$auto-complete-prefix-cls} {
  &-popup .#{$select-prefix-cls}-popup {
    background-color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-bg-popup'));
    border: 1px solid $auto-complete-popup-color-border;
    border-radius: $auto-complete-popup-border-radius;
    box-shadow: $auto-complete-popup-box-shadow;

    .#{$select-prefix-cls}-popup-inner {
      max-height: $auto-complete-popup-max-height;
      padding: $auto-complete-popup-padding-vertical 0;
    }

    .#{$select-prefix-cls}-option {
      height: $auto-complete-option-height;
      padding: 0 $auto-complete-option-padding-horizontal;
      font-size: $auto-complete-popup-font-size;
      line-height: $auto-complete-option-height;

      @mixin option-color($status) {
        $class-suffix: string.unquote('-#{$status}');

        @if $status == default {
          $class-suffix: string.unquote('');
        }

        &#{$class-suffix} {
          color: token-var('auto-complete-option-color-text_#{$status}');
          background-color: token-var('auto-complete-option-color-bg_#{$status}');
        }
      }

      @include option-color(default);
      @include option-color(selected);
      @include option-color(hover);
      // disabled 优先级最高，放在最后
      @include option-color(disabled);

      &-selected {
        font-weight: $auto-complete-option-font-weight_selected;
      }
    }
  }
}