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

$form-prefix-cls: string.unquote('#{theme.$prefix}-form');

// for input & textarea
@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;
}

@mixin input-status($status) {
  $input-prefix-cls: string.unquote('#{theme.$prefix}-input');
  $textarea-prefix-cls: string.unquote('#{theme.$prefix}-textarea');

  .#{$input-prefix-cls}-wrapper:not(.#{$input-prefix-cls}-disabled),
  .#{$textarea-prefix-cls}-wrapper:not(.#{$textarea-prefix-cls}-disabled) {
    background-color: token-var('form-color-bg_#{$status}');
    border-color: token-var('form-color-border_#{$status}');

    &:hover {
      background-color: token-var('form-color-bg_#{$status}_hover');
      border-color: token-var('form-color-border_#{$status}_hover');
    }
  }

  .#{$input-prefix-cls}-wrapper:not(.#{$input-prefix-cls}-disabled).#{$input-prefix-cls}-focus,
  .#{$textarea-prefix-cls}-wrapper:not(
      .#{$textarea-prefix-cls}-disabled
    ).#{$textarea-prefix-cls}-focus {
    background-color: token-var('form-color-bg_#{$status}_focus');
    border-color: token-var('form-color-border_#{$status}_focus');
    box-shadow: 0 0 0 token-var('form-size-shadow_#{$status}_focus')
      token-var('form-color-shadow_#{$status}_focus');
  }
}

@mixin select-view-status($status) {
  $input-prefix-cls: string.unquote('#{theme.$prefix}-input-tag');
  $select-view-prefix-cls: string.unquote('#{theme.$prefix}-select-view');

  .#{$select-view-prefix-cls}:not(.#{$select-view-prefix-cls}-disabled),
  .#{$input-prefix-cls}:not(.#{$input-prefix-cls}-disabled) {
    background-color: token-var('form-color-bg_#{$status}');
    border-color: token-var('form-color-border_#{$status}');

    &:hover {
      background-color: token-var('form-color-bg_#{$status}_hover');
      border-color: token-var('form-color-border_#{$status}_hover');
    }
  }

  .#{$select-view-prefix-cls}:not(
      .#{$select-view-prefix-cls}-disabled
    ).#{$select-view-prefix-cls}-focus,
  .#{$input-prefix-cls}:not(.#{$input-prefix-cls}-disabled).#{$input-prefix-cls}-focus {
    background-color: token-var('form-color-bg_#{$status}_focus');
    border-color: token-var('form-color-border_#{$status}_focus');
    box-shadow: 0 0 0 token-var('form-size-shadow_#{$status}_focus')
      token-var('form-color-shadow_#{$status}_focus');
  }
}

// datepicker
@mixin picker($status) {
  .#{theme.$prefix}-picker:not(.#{theme.$prefix}-picker-disabled) {
    background-color: token-var('form-color-bg_#{$status}');
    border-color: token-var('form-color-border_#{$status}');

    &:hover {
      background-color: token-var('form-color-bg_#{$status}_hover');
      border-color: token-var('form-color-border_#{$status}_hover');
    }
  }

  .#{theme.$prefix}-picker-focused:not(.#{theme.$prefix}-picker-disabled) {
    &,
    &:hover {
      background-color: token-var('form-color-bg_#{$status}_focus');
      border-color: token-var('form-color-border_#{$status}_focus');
      box-shadow: 0 0 0 token-var('form-size-shadow_#{$status}_focus')
        token-var('form-color-shadow_#{$status}_focus');
    }
  }
}

@mixin validate-status($status) {
  .#{theme.$prefix}-form-item-status-#{$status} {
    @include input-status($status);
    @include select-view-status($status);
    @include picker($status);
  }

  .#{theme.$prefix}-form-item-status-#{$status} {
    .#{$form-prefix-cls}-item-message-help {
      color: token-var('form-color-tip-text_#{$status}');
    }

    .#{$form-prefix-cls}-item-feedback {
      color: token-var('form-color-tip-icon-text_#{$status}');
    }
  }
}

@mixin select-view-feedback($prefix) {
  .#{$prefix}.#{$prefix}-multiple .#{$prefix}-view,
  .#{$prefix}.#{$prefix}-single .#{$prefix}-view {
    padding-right: 28px;
  }

  .#{$prefix}.#{$prefix}-multiple .#{$prefix}-suffix {
    padding-right: 0;
  }
}

@include validate-status(validating);
@include validate-status(success);
@include validate-status(warning);
@include validate-status(error);

.#{$form-prefix-cls}-item-control-children {
  position: relative;
}

.#{$form-prefix-cls}-item-feedback {
  position: absolute;
  top: 50%;
  right: 9px;
  font-size: 14px;
  transform: translateY(-50%);

  .#{theme.$prefix}-icon-loading {
    font-size: 12px;
  }
}

.#{$form-prefix-cls}-item-has-feedback {
  .#{theme.$prefix}-input,
  .#{theme.$prefix}-input-inner-wrapper,
  .#{theme.$prefix}-textarea {
    padding-right: 28px;
  }

  .#{theme.$prefix}-input-number-mode-embed .#{theme.$prefix}-input-number-step-layer {
    right: 24px;
  }

  @include select-view-feedback(string.unquote('#{theme.$prefix}-select'));
  @include select-view-feedback(string.unquote('#{theme.$prefix}-cascader'));
  @include select-view-feedback(string.unquote('#{theme.$prefix}-tree-select'));

  // datepicker timepicker
  .#{theme.$prefix}-picker {
    padding-right: 28px;
  }

  .#{theme.$prefix}-picker-suffix {
    .#{theme.$prefix}-picker-suffix-icon,
    .#{theme.$prefix}-picker-clear-icon {
      margin-right: 0;
      margin-left: 0;
    }
  }
}