@use '@style/theme/index.scss' as theme;
@use 'sass:math';
@use 'sass:string';
@use 'sass:map';
@use 'sass:meta';
@use '@style/mixins/index.scss' as *;
@use '@components/input/style/token.scss' as token;
@use '@components/input/style/token.scss' as *;

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

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

  @return $value;
}

@mixin input-suffix-feedback-icon-color() {
  .#{theme.$prefix}-feedback-icon {
    display: inline-flex;

    &-status-validating {
      color: $input-feedback-icon-color_validating;
    }

    &-status-success {
      color: $input-feedback-icon-color_success;
    }

    &-status-warning {
      color: $input-feedback-icon-color_warning;
    }

    &-status-error {
      color: $input-feedback-icon-color_error;
    }
  }
}

@mixin input-wrapper-style($cls) {
  display: inline-flex;
  box-sizing: border-box;
  width: 100%;
  padding-right: $input-padding-horizontal;
  padding-left: $input-padding-horizontal;
  color: $input-color-text;
  font-size: $input-size-default-font-size;
  background-color: $input-color-bg;
  border: $input-border-width solid $input-color-border;
  border-radius: $input-border-radius;
  cursor: text;
  transition:
    color theme.$transition-duration-1 theme.$transition-timing-function-standard,
    border-color theme.$transition-duration-1 theme.$transition-timing-function-standard,
    background-color theme.$transition-duration-1 theme.$transition-timing-function-standard;

  &:hover {
    background-color: $input-color-bg_hover;
    border-color: $input-color-border_hover;
  }

  &:focus-within,
  &.#{$cls}-focus {
    z-index: 1;
    background-color: $input-color-bg_focus;
    border-color: $input-color-border_focus;
    box-shadow: 0 0 0 $input-size-shadow_focus $input-color-shadow_focus;
  }

  // 禁用状态样式
  &.#{$cls}-disabled {
    color: $input-color-text_disabled;
    background-color: $input-color-bg_disabled;
    border-color: $input-color-border_disabled;
    cursor: not-allowed;

    &:hover {
      color: $input-color-text_disabled;
      background-color: $input-color-bg_disabled;
      border-color: $input-color-border_disabled;
    }

    .#{$cls}-prefix,
    .#{$cls}-suffix {
      color: inherit;
    }
  }

  // 错误状态样式
  &.#{$cls}-error {
    background-color: $input-color-bg_error;
    border-color: $input-color-border_error;

    &:hover {
      background-color: $input-color-bg_error_hover;
      border-color: $input-color-border_error_hover;
    }
  }

  &.#{$cls}-error:focus-within,
  &.#{$cls}-error#{&}-focus {
    z-index: 1;
    background-color: $input-color-bg_error_focus;
    border-color: $input-color-border_error_focus;
    box-shadow: 0 0 0 $input-size-shadow_error_focus $input-color-shadow_error_focus;
  }

  // 前后缀样式
  .#{$cls}-prefix,
  .#{$cls}-suffix {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    white-space: nowrap;
    user-select: none;

    > svg {
      font-size: $input-size-default-icon-suffix-size;
    }
  }

  .#{$cls}-prefix {
    padding-right: $input-padding-horizontal;
    color: $input-color-prefix-text;
  }

  .#{$cls}-suffix {
    padding-left: $input-padding-horizontal;
    color: $input-color-suffix-text;

    @include input-suffix-feedback-icon-color();
  }

  // 清除按钮样式
  .#{$cls}-clear-btn {
    align-self: center;
    color: $input-color-icon-clear;
    font-size: $input-size-icon-clear;
    visibility: hidden;
    cursor: pointer;

    > svg {
      position: relative;
      transition: color theme.$transition-duration-1 theme.$transition-timing-function-standard;
    }
  }

  &:hover .#{$cls}-clear-btn {
    visibility: visible;
  }

  // 没有选中情况下显示深色
  &:not(.#{$cls}-focus) .#{$cls}-icon-hover:hover::before {
    background-color: $input-color-icon-clear-bg_hover;
  }
}

@mixin input-style() {
  width: 100%;
  padding-right: 0;
  padding-left: 0;
  color: inherit;
  line-height: theme.$line-height-base;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  cursor: inherit;
  appearance: none;
  -webkit-tap-highlight-color: rgb(0 0 0 / 0%);

  &::placeholder {
    color: $input-color-placeholder-text;
  }

  &[disabled]::placeholder {
    color: $input-color-text_disabled;
  }

  // fix color error under disabled status in safari
  &[disabled] {
    -webkit-text-fill-color: $input-color-text_disabled;
  }
}

@mixin input-size($size) {
  $height: string.unquote('input-size-#{$size}-height');
  $font-size: string.unquote('input-size-#{$size}-font-size');
  $line-height: string.unquote('input-size-#{$size}-line-height');

  /* prettier-ignore */
  padding-top: math.div(
    math.round(token-var($height) - $input-border-width * 2 - token-var($line-height) * token-var($font-size)),
    2
  );

  /* prettier-ignore */
  padding-bottom: math.div(
    math.round(token-var($height) - $input-border-width * 2 - token-var($line-height) * token-var($font-size)),
    2
  );
  font-size: token-var($font-size);
  line-height: token-var($line-height);
}