@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/SegmentedControl';
@import '@viasat/beam-tokens/components/Button';

$scBaseClass: '#{constants.$prefix}segmented-control';

$border: tokens.$bm-comp-btn-border-width solid
  tokens.$bm-comp-seg-control-color-border;

$sizes: (
  'sm': (
    'min-width': tokens.$bm-comp-btn-size-sm-width,
    'height': tokens.$bm-comp-btn-size-sm-height,
    'icon': tokens.$bm-comp-btn-size-sm-icon,
    'font': tokens.$bm-comp-btn-typo-sm,
    'padding': 0 tokens.$bm-comp-seg-control-space-sm-x,
  ),
  'md': (
    'min-width': tokens.$bm-comp-btn-size-md-width,
    'height': tokens.$bm-comp-btn-size-md-height,
    'icon': tokens.$bm-comp-btn-size-md-icon,
    'font': tokens.$bm-comp-btn-typo-md,
    'padding': 0 tokens.$bm-comp-seg-control-space-md-x,
  ),
  'lg': (
    'min-width': tokens.$bm-comp-btn-size-lg-width,
    'height': tokens.$bm-comp-btn-size-lg-height,
    'icon': tokens.$bm-comp-btn-size-lg-icon,
    'font': tokens.$bm-comp-btn-typo-lg,
    'padding': 0 tokens.$bm-comp-seg-control-space-lg-x,
  ),
);

.#{$scBaseClass} {
  box-shadow: tokens.$bm-comp-btn-shadow;

  &--disabled {
    opacity: tokens.$bm-sem-opacity-disabled;
    cursor: not-allowed;
  }
}

.#{$scBaseClass}__list {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  gap: 0;
  max-width: 100%;
  min-width: 0;

  // Ensure direct slotted children/wrappers can shrink and don't overflow
  // This styles is also mirrored in SegmentedControlItem.ts
  // to ensure the overflow observer works when a wrapper is used
  ::slotted(*) {
    min-width: 0;
    flex-shrink: 1;
  }

  &--fluid {
    width: 100%;
    display: flex;

    // In fluid mode, let each slotted child grow to fill available space
    ::slotted(*) {
      flex: 1 1 auto;
    }
  }
}

.#{$scBaseClass}__item {
  display: flex;
  position: relative;
  border: $border;
  border-color: tokens.$bm-comp-seg-control-color-border;
  margin-inline-start: -1px;
  min-width: 0;
  outline: none;

  background: tokens.$bm-comp-seg-control-color-bg;
  color: tokens.$bm-comp-seg-control-color-fg;
  cursor: pointer;
  justify-content: center;

  &--fluid {
    flex: 1 1 auto;
    min-width: 0;

    .#{$scBaseClass}__item__label {
      width: 100%;
      min-width: 0;
    }
  }

  &--first {
    border-radius: tokens.$bm-comp-seg-control-radius 0 0
      tokens.$bm-comp-seg-control-radius;
    border-inline-start-color: tokens.$bm-comp-seg-control-color-border;
    margin-inline-start: 0;

    [dir='rtl'] &,
    :dir(rtl) & {
      border-radius: 0 tokens.$bm-comp-seg-control-radius
        tokens.$bm-comp-seg-control-radius 0;
    }
  }

  &--last {
    border-radius: 0 tokens.$bm-comp-seg-control-radius
      tokens.$bm-comp-seg-control-radius 0;
    border-inline-end-color: tokens.$bm-comp-seg-control-color-border;
    margin-inline-end: 0;

    [dir='rtl'] &,
    :dir(rtl) & {
      border-radius: tokens.$bm-comp-seg-control-radius 0 0
        tokens.$bm-comp-seg-control-radius;
    }
  }

  &__content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: tokens.$bm-comp-btn-space-gap;
    cursor: inherit;
    min-width: 0;
    width: 100%;
  }

  &__controlText {
    align-content: center;
    height: 100%;
    padding: 0 tokens.$bm-comp-btn-space-label-x;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  &__icon,
  ::slotted([slot='icon']) {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  &--selected {
    z-index: 1;
    background: tokens.$bm-comp-seg-control-color-bg-selected;
    border: tokens.$bm-comp-btn-border-width solid
      tokens.$bm-comp-seg-control-color-border-selected;

    .#{$scBaseClass}__item__controlText,
    .#{$scBaseClass}__item__icon,
    ::slotted([slot='icon']) {
      color: tokens.$bm-comp-seg-control-color-fg-selected;
    }

    #{state-layer.getStateLayerSelector('&', 'hover')} {
      #{state-layer.$background}: unset;
    }
  }

  &__state-layer {
    pointer-events: none;
    cursor: pointer;
    z-index: 2;
  }

  &:focus-visible .#{state-layer.$stateLayerBaseClass} {
    #{state-layer.$outline-width}: tokens.$bm-sem-border-width-focus;
    #{state-layer.$outline-color}: tokens.$bm-sem-color-border-focus;
    #{state-layer.$outline-offset}: 0;
  }

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

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

      .#{$scBaseClass}__item__icon svg,
      ::slotted([slot='icon']) {
        width: map.get($properties, 'icon');
        height: map.get($properties, 'icon');
      }

      &.#{$scBaseClass}__item--iconOnly {
        padding: 0 !important;
        min-width: map.get($properties, 'min-width');
      }
    }
  }
}

.#{$scBaseClass}__panel {
  display: none;

  &--selected {
    display: block;
  }
}