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

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

$nativeSelectBaseClass: '#{constants.$prefix}native-select';

$expandIconWidth: 0.625rem;
$expandIconHeight: 0.3125rem;
$expandIcon: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNSIgdmlld0JveD0iMCAwIDEwIDUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wLjE4MjgzMiAwLjMxMjQ2NEMwLjExNDQwOSAwLjM5NzkxNSAwLjA2MzQ5MzEgMC40OTYwMSAwLjAzMjk5NCAwLjYwMTE0NUMwLjAwMjQ5NDk0IDAuNzA2MjggLTAuMDA2OTg5NjIgMC44MTYzOTUgMC4wMDUwODIyOCAwLjkyNTE5NkMwLjAxNzE1NDIgMS4wMzQgMC4wNTA1NDU5IDEuMTM5MzYgMC4xMDMzNSAxLjIzNTI1QzAuMTU2MTUzIDEuMzMxMTQgMC4yMjczMzQgMS40MTU2OSAwLjMxMjgyNSAxLjQ4NDA2TDQuNDc5MjUgNC44MTcyQzQuNjI3MDQgNC45MzU1MyA0LjgxMDcyIDUgNS4wMDAwNSA1QzUuMTg5MzcgNSA1LjM3MzA2IDQuOTM1NTMgNS41MjA4NSA0LjgxNzJMOS42ODcyNyAxLjQ4NDA2QzkuODU5ODcgMS4zNDU5NCA5Ljk3MDU0IDEuMTQ0OSA5Ljk5NDkxIDAuOTI1MTg1QzEwLjAxOTMgMC43MDU0NjggOS45NTUzOSAwLjQ4NTA2NiA5LjgxNzI2IDAuMzEyNDY0QzkuNjc5MTQgMC4xMzk4NjMgOS40NzgxIDAuMDI5MjAwNyA5LjI1ODM5IDAuMDA0ODIyNDJDOS4wMzg2NyAtMC4wMTk1NTU5IDguODE4MjcgMC4wNDQzNDY1IDguNjQ1NjcgMC4xODI0NzJMNS4wMDAwNSAzLjA5ODk3TDEuMzU0NDMgMC4xODI0NzJDMS4yNjg5OCAwLjExNDA0OCAxLjE3MDg4IDAuMDYzMTMzIDEuMDY1NzUgMC4wMzI2MzM5QzAuOTYwNjE0IDAuMDAyMTM0ODEgMC44NTA1IC0wLjAwNzM1MDQgMC43NDE2OTggMC4wMDQ3MjE1QzAuNjMyODk2IDAuMDE2NzkzNCAwLjUyNzUzOSAwLjA1MDE4NTggMC40MzE2NDYgMC4xMDI5ODlDMC4zMzU3NTQgMC4xNTU3OTMgMC4yNTEyMDYgMC4yMjY5NzQgMC4xODI4MzIgMC4zMTI0NjRWMC4zMTI0NjRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K');

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

$selectCursor: '--#{constants.$prefix}text-field-cursor';
$selectInputCursor: '--#{constants.$prefix}text-field-input-cursor';

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

.#{$nativeSelectBaseClass} {
  @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;

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

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

  &__field {
    position: relative;
    cursor: var(#{$selectCursor}, default);

    &:after {
      content: '';
      position: absolute;
      pointer-events: none;
      width: $expandIconWidth;
      height: $expandIconHeight;

      @include mixins.svg-icon($expandIcon);
      background-color: tokens.$bm-comp-input-color-icon;
      inset-inline-end: var(#{inputVars.$fieldPaddingX});
      inset-block-start: calc(
        var(#{inputVars.$fieldPaddingX}) + #{$expandIconHeight} / 2
      );
    }
  }

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

    &--#{$state} &__field &__input {
      color: map.get($styleTokens, textColor);
      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})
        );
      }
    }
  }

  &__field &__input {
    width: 100%;
    display: block;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;

    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;

    color: tokens.$bm-comp-input-color-text;
    font: var(#{inputVars.$fieldFont});
    cursor: var(#{$selectInputCursor}, pointer);
    box-shadow: tokens.$bm-comp-input-shadow-field;
    background-color: tokens.$bm-comp-input-color-bg;
    height: var(#{inputVars.$fieldHeight});
    transform: translate3d(
      tokens.$bm-sem-space-0,
      tokens.$bm-sem-space-0,
      tokens.$bm-sem-space-0
    );

    padding-block: var(#{inputVars.$fieldPaddingY});
    padding-inline: var(#{inputVars.$fieldPaddingX})
      calc(
        #{$expandIconWidth} + #{tokens.$bm-comp-input-space-field-gap} +
          var(#{inputVars.$fieldPaddingX})
      );

    &:focus {
      @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})
      );
    }
  }
}