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

$checkboxBaseClass: '#{constants.$prefix}checkbox';

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

$checkboxStates: (
  error: (
    labelColor: tokens.$bm-comp-input-color-text,
    backgroundColor: tokens.$bm-comp-input-color-bg,
    selectedColor: tokens.$bm-comp-input-color-choice-checkbox-selected-bg-error,
    borderColor: tokens.$bm-comp-input-color-border-error,
  ),
  read-only: (
    labelColor: tokens.$bm-comp-input-color-text,
    backgroundColor: tokens.$bm-comp-input-color-bg-disabled,
    selectedColor: tokens.$bm-comp-input-color-icon,
    borderColor: tokens.$bm-comp-input-color-border-disabled,
  ),
  disabled: (
    labelColor: tokens.$bm-comp-input-color-text-disabled,
    backgroundColor: tokens.$bm-comp-input-color-bg-disabled,
    selectedColor: tokens.$bm-comp-input-color-icon-disabled,
    borderColor: tokens.$bm-comp-input-color-border-disabled,
  ),
);

.#{$checkboxBaseClass} {
  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);
  }

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

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

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

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

  &__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-checkbox-base();

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

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

  &--indeterminate &__input:checked {
    &::after {
      height: 2px;
      width: 50%;

      border-radius: tokens.$bm-comp-input-size-choice-checkbox;

      -webkit-mask-image: none;
      mask-image: none;
    }
  }
}