@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 '../utils/inputChoiceMixins.scss' as choiceMixins;

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

$radioButtonBaseClass: '#{constants.$prefix}radio-button';

$inputChoiceCursor: '--#{constants.$prefix}input-choice-cursor';
$inputChoiceLabelCursor: '--#{constants.$prefix}input-choice-label-cursor';
$inputChoiceLabelPointerEvents: '--#{constants.$prefix}input-choice-label-pointer-events';

$radioButtonStates: (
  error: (
    labelColor: tokens.$bm-comp-input-color-text,
    borderColor: tokens.$bm-comp-input-color-border-error,
    backgroundColor: tokens.$bm-comp-input-color-bg,
    innerColor: tokens.$bm-comp-input-color-choice-radio-selected-inner-circle-error,
  ),
  read-only: (
    labelColor: tokens.$bm-comp-input-color-text,
    borderColor: tokens.$bm-comp-input-color-border-disabled,
    backgroundColor: tokens.$bm-comp-input-color-bg-disabled,
    innerColor: tokens.$bm-comp-input-color-icon,
  ),
  disabled: (
    labelColor: tokens.$bm-comp-input-color-text-disabled,
    borderColor: tokens.$bm-comp-input-color-border-disabled,
    backgroundColor: tokens.$bm-comp-input-color-bg-disabled,
    innerColor: tokens.$bm-comp-input-color-icon-disabled,
  ),
);

.#{$radioButtonBaseClass} {
  display: inline-flex;
  @include cursors.applyChoiceCursors();

  &__label {
    display: inherit;
    word-break: break-word;
    color: tokens.$bm-comp-input-color-text;
    font: tokens.$bm-comp-input-typo-md;
    gap: tokens.$bm-comp-input-space-choice-gap-inside;
    cursor: var(#{$inputChoiceLabelCursor}, pointer);
    pointer-events: var(#{$inputChoiceLabelPointerEvents}, auto);
  }

  @each $state, $values in $radioButtonStates {
    &--#{$state} &__label {
      color: map.get($values, labelColor);
    }

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

      &:checked {
        &:after {
          background-color: map.get($values, innerColor);
        }
      }
    }
  }

  &--with-label &__label &__input {
    margin: tokens.$bm-comp-input-space-choice-nudge tokens.$bm-sem-space-0;
  }

  &__label &__input {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;

    position: relative;
    margin: tokens.$bm-sem-space-0;
    flex-shrink: tokens.$bm-sem-space-0;
    cursor: var(#{$inputChoiceCursor}, pointer);
    @include choiceMixins.choice-radio-base();

    &:focus-visible {
      @include mixins.simulated-inset-outline();
    }

    &:checked {
      @include choiceMixins.choice-radio-checked();
    }
  }
}