@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;

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

$textAreaBaseClass: '#{constants.$prefix}text-area';

$textAreaCursor: '--#{constants.$prefix}text-field-cursor';
$textAreaInputCursor: '--#{constants.$prefix}text-field-input-cursor';

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

$resizeIconFlip: '--#{constants.$prefix}resize-icon-flip';
$resizeIcon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzY0NjIyXzQ4MzUzKSI+CjxwYXRoIGQ9Ik0xOC4zMzMzIDE4LjMzMzNIMTYuNjY2N1YxNi42NjY3SDE4LjMzMzNWMTguMzMzM1pNMTguMzMzMyAxNUgxNi42NjY3VjEzLjMzMzNIMTguMzMzM1YxNVpNMTUgMTguMzMzM0gxMy4zMzMzVjE2LjY2NjdIMTVWMTguMzMzM1pNMTUgMTVIMTMuMzMzM1YxMy4zMzMzSDE1VjE1Wk0xMS42NjY3IDE4LjMzMzNIMTBWMTYuNjY2N0gxMS42NjY3VjE4LjMzMzNaTTE4LjMzMzMgMTEuNjY2N0gxNi42NjY3VjEwSDE4LjMzMzNWMTEuNjY2N3oiIGZpbGw9IiM0NjU5NjciLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF82NDYyMl80ODM1MyI+CjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4=');

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

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

  @each $state, $styleTokens in $stateStyleTokens {
    &--#{$state} &__header &__counter {
      color: map.get($styleTokens, counterColor);
    }

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

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

      @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})
        );
      }
    }
  }

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

  @-moz-document url-prefix() {
    &__field:after {
      display: none;
    }
  }

  &--hide-resize &__field:after {
    display: none;
  }

  &--hide-resize &__field &__input {
    resize: none;
  }

  &--cols-width {
    max-width: fit-content;
  }

  &--cols-width &__field &__input {
    width: auto;
  }

  &__header {
    display: flex;
    gap: tokens.$bm-sem-space-50;
  }

  &__header &__counter {
    margin-block-end: auto;
    margin-inline-start: auto;

    font: tokens.$bm-comp-input-typo-character-count;
    color: tokens.$bm-comp-input-color-text-placeholder;
    padding-block-end: tokens.$bm-comp-label-space-bottom;
  }

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

    &:dir(rtl) {
      #{$resizeIconFlip}: -1;
    }

    &::after {
      content: '';
      position: absolute;
      pointer-events: none;
      width: tokens.$bm-sem-space-125;
      height: tokens.$bm-sem-space-125;

      @include mixins.svg-icon($resizeIcon);
      inset-block-end: tokens.$bm-sem-space-12;
      inset-inline-end: tokens.$bm-sem-space-12;
      transform: scaleX(var(#{$resizeIconFlip}, 1));
      background-color: tokens.$bm-sem-color-icon-secondary;
    }
  }

  &__field &__input {
    width: 100%;
    display: block;
    resize: vertical;
    box-sizing: border-box;

    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: tokens.$bm-comp-input-typo-md;
    cursor: var(#{$textAreaInputCursor}, text);
    box-shadow: tokens.$bm-comp-input-shadow-field;
    background-color: tokens.$bm-comp-input-color-bg;
    min-height: tokens.$bm-comp-input-size-field-text-area-height;
    padding: tokens.$bm-comp-input-space-field-y-md tokens.$bm-comp-input-space-field-x-md;
    transform: translate3d(
      tokens.$bm-sem-space-0,
      tokens.$bm-sem-space-0,
      tokens.$bm-sem-space-0
    );

    &::-webkit-resizer {
      display: none;
    }

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

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