@use 'sass:map';
@use '../utils/constants.scss';
@use '../utils/mixins.scss' as mixins;
@use '../utils/tokens.scss' as tokens;
@use '../utils/cursors.scss' as cursors;
@use './input.vars.scss' as inputVars;

@import '@viasat/beam-tokens/components/Input';

$textFieldBaseClass: '#{constants.$prefix}text-field';

$textFieldCursor: '--#{constants.$prefix}text-field-cursor';
$textFieldInputCursor: '--#{constants.$prefix}text-field-input-cursor';

$labelSpaceBottom: '--#{constants.$prefix}label-space-bottom';
$helperTextSpaceTop: '--#{constants.$prefix}helper-text-space-top';

$stateStyleTokens: (
  error: (
    color: tokens.$bm-comp-input-color-text,
    backgroundColor: tokens.$bm-comp-input-color-bg,
    borderColor: tokens.$bm-comp-input-color-border-error,
    placeholderColor: tokens.$bm-comp-input-color-text-placeholder,
  ),
  read-only: (
    color: tokens.$bm-comp-input-color-text,
    svgColor: tokens.$bm-comp-input-color-icon,
    backgroundColor: tokens.$bm-comp-input-color-bg-disabled,
    borderColor: tokens.$bm-comp-input-color-border-disabled,
    placeholderColor: tokens.$bm-comp-input-color-text-placeholder,
  ),
  disabled: (
    color: tokens.$bm-comp-input-color-text-disabled,
    svgColor: tokens.$bm-comp-input-color-text-disabled,
    backgroundColor: tokens.$bm-comp-input-color-bg-disabled,
    borderColor: tokens.$bm-comp-input-color-border-disabled,
    placeholderColor: tokens.$bm-comp-input-color-text-disabled,
  ),
);

.#{$textFieldBaseClass} {
  @include cursors.applyTextCursors();
  max-width: tokens.$bm-comp-input-size-field-width;

  #{$labelSpaceBottom}: #{tokens.$bm-comp-label-space-bottom};
  #{$helperTextSpaceTop}: #{tokens.$bm-comp-helper-text-space-top};

  @include inputVars.field-size-scale;

  @each $state, $styleTokens in $stateStyleTokens {
    &--#{$state} &__field {
      border-color: map.get($styleTokens, borderColor);
      background-color: map.get($styleTokens, backgroundColor);

      @if ($state == error) {
        @include mixins.simulated-inset-outline(
          tokens.$bm-comp-input-border-width-field-error,
          solid,
          map.get($styleTokens, borderColor),
          calc(0px - #{tokens.$bm-comp-input-border-width-field-error})
        );
      }
    }

    &--#{$state} &__field &__input {
      color: map.get($styleTokens, color);

      &::placeholder {
        color: map.get($styleTokens, placeholderColor);
      }
    }

    &--#{$state} &__field &__content {
      @if ($state == disabled) {
        opacity: tokens.$bm-sem-opacity-disabled;
      }

      svg,
      ::slotted([slot*='content']) {
        color: map.get($styleTokens, svgColor);
      }
    }
  }

  &--fluid {
    max-width: 100%;
  }

  &--ellipsis &__field &__input {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &__field {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    box-sizing: border-box;
    transform: translate3d(
      tokens.$bm-sem-space-0,
      tokens.$bm-sem-space-0,
      tokens.$bm-sem-space-0
    );

    border-style: solid;
    border-color: tokens.$bm-comp-input-color-border;
    border-radius: tokens.$bm-comp-input-radius-field;
    border-width: tokens.$bm-comp-input-border-width-field-default;

    cursor: var(#{$textFieldCursor}, default);
    gap: tokens.$bm-comp-input-space-field-gap;
    box-shadow: tokens.$bm-comp-input-shadow-field;
    background-color: tokens.$bm-comp-input-color-bg;
    height: var(#{inputVars.$fieldHeight});
    padding: var(#{inputVars.$fieldPaddingY}) var(#{inputVars.$fieldPaddingX});

    &:focus-within {
      @include mixins.simulated-inset-outline(
        tokens.$bm-sem-border-width-focus,
        solid,
        tokens.$bm-sem-color-border-focus,
        calc(0px - #{tokens.$bm-sem-size-focus-offset})
      );
    }
  }

  &__field &__input {
    border: none;
    outline: none;
    background: none;

    width: 100%;
    padding: tokens.$bm-sem-space-0;
    color: tokens.$bm-comp-input-color-text;
    font: var(#{inputVars.$fieldFont});
    cursor: var(#{$textFieldInputCursor}, text);

    &:-webkit-autofill {
      caret-color: tokens.$bm-comp-input-color-text;
      -webkit-text-fill-color: tokens.$bm-comp-input-color-text;

      @include mixins.simulated-inset-border(
        var(#{inputVars.$fieldHeight}),
        tokens.$bm-comp-input-color-bg
      );
    }

    &::placeholder {
      color: tokens.$bm-comp-input-color-text-placeholder;
    }
  }

  &__field &__content {
    display: flex;
    align-items: center;

    svg,
    ::slotted([slot*='content']) {
      color: tokens.$bm-comp-input-color-icon;
      height: tokens.$bm-sem-size-icon-sm;
    }

    // Beam icons resize with the field; third-party SVGs keep the fixed size
    // set above, per EPTOOLS-1515 acceptance criteria.
    @include inputVars.field-content-icon;
  }
}