@use 'sass:map';
@use '../utils/constants.scss';
@use '../utils/tokens.scss' as tokens;
@use '../utils/stateLayerVars.scss' as state-layer;

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

$chipBaseClass: '#{constants.$prefix}chip';

$sizes: (
  'sm': (
    'height': tokens.$bm-comp-chip-size-sm-height,
    'icon-size': tokens.$bm-comp-chip-size-sm-icon,
    'gap': tokens.$bm-comp-chip-space-sm-gap,
    'padding-inline': tokens.$bm-comp-chip-space-sm-x,
    'font': tokens.$bm-comp-chip-typo-sm,
  ),
  'md': (
    'height': tokens.$bm-comp-chip-size-md-height,
    'icon-size': tokens.$bm-comp-chip-size-md-icon,
    'gap': 0,
    'padding-inline': tokens.$bm-comp-chip-space-md-x,
    'font': tokens.$bm-comp-chip-typo-md,
  ),
  'lg': (
    'height': tokens.$bm-comp-chip-size-lg-height,
    'icon-size': tokens.$bm-comp-chip-size-lg-icon,
    'gap': 0,
    'padding-inline': tokens.$bm-comp-chip-space-lg-x,
    'font': tokens.$bm-comp-chip-typo-lg,
  ),
);

.#{$chipBaseClass} {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  box-shadow: tokens.$bm-comp-chip-shadow;
  color: tokens.$bm-comp-chip-color-fg;
  background-color: tokens.$bm-comp-chip-color-bg;
  border-color: tokens.$bm-comp-chip-color-border;
  border-style: solid;
  border-radius: tokens.$bm-comp-chip-radius-container;
  border-width: tokens.$bm-comp-chip-border-width;
  cursor: pointer;
  user-select: none;

  &__input {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: inherit;
  }

  &__label {
    display: flex;
    align-items: center;
    gap: 0;
    cursor: inherit;

    .#{$chipBaseClass}--ellipsis & > span {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      flex: 1;

      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  &__icon {
    display: flex;
    align-items: center;
    color: tokens.$bm-comp-chip-color-fg;
  }

  &:has(input:checked) {
    color: tokens.$bm-comp-chip-color-fg-selected;
    background-color: tokens.$bm-comp-chip-color-bg-selected;
    border-color: tokens.$bm-comp-chip-color-border-selected;
    .#{$chipBaseClass}__icon {
      color: tokens.$bm-comp-chip-color-fg-selected;
    }
    --bm-comp-close-btn-color-default: tokens.$bm-comp-chip-color-fg-selected;
  }

  &:has(input[type='radio']:checked) {
    color: tokens.$bm-comp-chip-color-fg-selected;
    background-color: tokens.$bm-comp-chip-color-bg-selected;
    border-color: tokens.$bm-comp-chip-color-border-selected;
  }

  &__state-layer {
    pointer-events: none;
    #{state-layer.$opacity}: 0;
    #{state-layer.$outline-width}: 0;
  }

  // Show state layer only when component got this class
  &--has-focus .#{state-layer.$stateLayerBaseClass} {
    #{state-layer.$opacity}: 1;
    #{state-layer.$outline-width}: tokens.$bm-sem-border-width-focus;
  }

  // When the input is focused, hide the state layer outline
  &:focus-within:has(input:focus) .#{state-layer.$stateLayerBaseClass} {
    #{state-layer.$outline-width}: 0px;
  }

  // When the input is key board focus, show the state layer outline
  &:focus-within:has(input:focus-visible) .#{state-layer.$stateLayerBaseClass} {
    #{state-layer.$outline-width}: tokens.$bm-sem-border-width-focus;
  }

  &--disabled {
    opacity: tokens.$bm-sem-opacity-disabled;
    cursor: not-allowed !important;
    pointer-events: none;
  }

  &--fluid {
    width: 100%;
  }

  &--non-selectable {
    cursor: text;
    user-select: text;
  }

  @each $size, $properties in $sizes {
    &--#{$size} {
      height: map.get($properties, 'height');
      padding-inline: map.get($properties, 'padding-inline');
      font: map.get($properties, 'font');
      gap: map.get($properties, 'gap');

      .#{$chipBaseClass}__label {
        gap: map.get($properties, 'gap');
      }

      .#{$chipBaseClass}__icon {
        width: map.get($properties, 'icon-size');
        height: map.get($properties, 'icon-size');
      }

      @if $size == 'md' or $size == 'lg' {
        .#{$chipBaseClass}__label > span:not(.#{$chipBaseClass}__icon) {
          padding-inline: tokens.$bm-comp-chip-space-text;
        }
      }
    }
  }

  &__label {
    flex-direction: row;
  }

  &__icon {
    order: -1;
  }

  &__dismiss-button {
    order: 1;
    margin-inline-start: auto;
  }
}