@use 'sass:map';
@use '../utils/constants.scss';
@use '../utils/tokens.scss' as tokens;

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

$tabsBaseClass: '#{constants.$prefix}tabs';
$tabsItemBaseClass: '#{$tabsBaseClass}__item';

$sizes: (
  'md': (
    'height': tokens.$bm-comp-tabs-size-md-item,
    'font': tokens.$bm-comp-tabs-typo-md,
    'selected-font': tokens.$bm-comp-tabs-typo-md-selected,
    'icon': tokens.$bm-comp-tabs-size-md-icon,
    'icon-only': tokens.$bm-comp-tabs-size-md-icon-only,
    'indicator': tokens.$bm-comp-tabs-size-md-indicator-extent,
  ),
  'lg': (
    'height': tokens.$bm-comp-tabs-size-lg-item,
    'font': tokens.$bm-comp-tabs-typo-lg,
    'selected-font': tokens.$bm-comp-tabs-typo-lg-selected,
    'icon': tokens.$bm-comp-tabs-size-lg-icon,
    'icon-only': tokens.$bm-comp-tabs-size-lg-icon-only,
    'indicator': tokens.$bm-comp-tabs-size-lg-indicator-extent,
  ),
);

.#{$tabsBaseClass} {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: tokens.$bm-comp-tabs-space-gap-outer;
  color: tokens.$bm-sem-color-text-primary;

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

  &--vertical {
    flex-direction: row;
  }

  &__wrapper {
    position: relative;
    display: flex;
    justify-content: center;

    .#{$tabsBaseClass}--vertical & {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      gap: tokens.$bm-comp-tabs-space-gap-outer;
    }
  }

  &__divider {
    inline-size: 100%;
    position: absolute;
    bottom: 0;
    z-index: 1;

    .#{$tabsBaseClass}--vertical & {
      inline-size: auto;
      block-size: 100%;
      position: absolute;
      inset-block-end: auto;
      inset-block-start: 0;
      inset-inline-start: 0;
      z-index: 1;
    }
  }
}

.#{$tabsBaseClass}__group {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  outline: none;
  z-index: 2;
  background: inherit;

  &--vertical {
    flex-direction: column;
    align-items: flex-start;
    width: auto;
  }

  &__content {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
    gap: tokens.$bm-comp-tabs-space-gap-outer;

    &--scrollable {
      --gradient-angle: 90deg;

      @at-root [dir='rtl'] & {
        --gradient-angle: 270deg;
      }

      &:not(.#{$tabsBaseClass}__group__content--at-start):not(
          .#{$tabsBaseClass}__group__content--at-end
        ) {
        -webkit-mask-image: linear-gradient(
          var(--gradient-angle),
          transparent 0%,
          #fff 25%,
          #fff 75%,
          transparent 100%
        );
        mask-image: linear-gradient(
          var(--gradient-angle),
          transparent 0%,
          #fff 25%,
          #fff 75%,
          transparent 100%
        );
      }

      &.#{$tabsBaseClass}__group__content--at-start:not(
          .#{$tabsBaseClass}__group__content--at-end
        ) {
        -webkit-mask-image: linear-gradient(
          var(--gradient-angle),
          #fff 0%,
          #fff 75%,
          transparent 100%
        );
        mask-image: linear-gradient(
          var(--gradient-angle),
          #fff 0%,
          #fff 75%,
          transparent 100%
        );
      }

      &.#{$tabsBaseClass}__group__content--at-end:not(
          .#{$tabsBaseClass}__group__content--at-start
        ) {
        -webkit-mask-image: linear-gradient(
          var(--gradient-angle),
          transparent 0%,
          #fff 25%,
          #fff 100%
        );
        mask-image: linear-gradient(
          var(--gradient-angle),
          transparent 0%,
          #fff 25%,
          #fff 100%
        );
      }
    }

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

    .#{$tabsBaseClass}--fluid & {
      gap: tokens.$bm-sem-space-50;
    }

    .#{$tabsBaseClass}--vertical & {
      flex-direction: column;
      align-items: stretch;
      overflow-y: auto;
      overflow-x: hidden;
      width: auto;
      padding-inline: 0;
      gap: 0;
    }
  }

  &__scroll-container {
    position: absolute;
    inset-block-start: 0;
    inset-block-end: 2px;
    justify-content: space-between;
    width: inherit;
    z-index: 5;
    display: flex;
    align-items: center;
    pointer-events: none;

    &--left {
      inset-inline-start: 0;
      justify-content: flex-start;
    }

    &--right {
      inset-inline-end: 0;
      justify-content: flex-end;
    }
  }

  &__scroll-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 6;

    &--visible {
      opacity: 1;
      pointer-events: auto;
    }
  }
}

.#{$tabsItemBaseClass} {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  gap: tokens.$bm-comp-tabs-space-gap;
  outline: none;
  color: tokens.$bm-comp-tabs-color-text;

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

  &--fluid {
    flex: 1;
    min-width: 0;
    width: 100%;
  }

  &--vertical:not(.#{$tabsItemBaseClass}--icon-only) {
    padding-inline: tokens.$bm-comp-tabs-space-x;
    justify-content: flex-start;
  }

  &__content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    flex-basis: content;
    padding-inline: tokens.$bm-sem-border-width-focus;
  }

  &__input {
    display: none;
  }

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

  &__indicator {
    display: hidden;
    position: absolute;
    inset-block-end: 0;
    height: tokens.$bm-comp-tabs-size-indicator;
    width: 100%;
    border-start-start-radius: tokens.$bm-comp-tabs-radius-indicator;
    border-start-end-radius: tokens.$bm-comp-tabs-radius-indicator;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    z-index: 3;

    .#{$tabsBaseClass}--vertical & {
      inset-inline-start: 0;
      inset-block-start: 50%;
      transform: translateY(-50%);

      inset-block-end: auto;
      width: tokens.$bm-comp-tabs-size-indicator;
      border-start-start-radius: 0;
      border-start-end-radius: tokens.$bm-comp-tabs-radius-indicator;
      border-end-start-radius: 0;
      border-end-end-radius: tokens.$bm-comp-tabs-radius-indicator;
    }
  }

  &:hover {
    &:not(.#{$tabsItemBaseClass}--selected):not(.#{$tabsItemBaseClass}--disabled) {
      .#{$tabsItemBaseClass}__indicator {
        display: block;
        background: tokens.$bm-comp-tabs-color-indicator;
      }
    }
  }

  &__icon {
    color: tokens.$bm-comp-tabs-color-icon;
  }

  &--selected {
    .#{$tabsItemBaseClass}__indicator {
      display: block;
      background: tokens.$bm-comp-tabs-color-indicator-selected;
    }
    .#{$tabsItemBaseClass}__icon {
      color: tokens.$bm-comp-tabs-color-icon-selected;
    }
  }

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

      &.#{$tabsItemBaseClass}--selected {
        font: map.get($value, 'selected-font');
        color: tokens.$bm-comp-tabs-color-text-selected;
      }

      .#{$tabsItemBaseClass}__icon {
        width: map.get($value, 'icon');
        height: map.get($value, 'icon');
      }

      &.#{$tabsItemBaseClass}--icon-only {
        height: map.get($value, 'height');
        width: map.get($value, 'height');

        .#{$tabsItemBaseClass}__icon {
          width: map.get($value, 'icon-only');
          height: map.get($value, 'icon-only');
        }

        .#{$tabsItemBaseClass}__indicator {
          width: map.get($value, 'indicator');
        }
      }

      .#{$tabsBaseClass}--vertical & {
        .#{$tabsItemBaseClass}__indicator {
          height: map.get($value, 'indicator');
          width: tokens.$bm-comp-tabs-size-indicator;
        }
      }
    }
  }

  &:focus {
    outline: none;
  }

  // Only show outline when using keyboard navigation
  &:focus-visible:not(:active) {
    .#{$tabsItemBaseClass}__label {
      outline: tokens.$bm-sem-border-width-focus solid
        tokens.$bm-sem-color-border-focus;
      border-radius: tokens.$bm-sem-radius-focus-sm;
      z-index: 1;
    }
  }

  &__controlText {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
    word-break: break-word;
    flex: 1;

    .#{$tabsBaseClass}--vertical & {
      white-space: normal;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      line-clamp: 2;
    }
  }
}

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

  &--selected {
    display: flex;
    align-self: stretch;
    justify-content: center;
    flex-direction: column;
  }

  .#{$tabsBaseClass}--vertical & {
    flex: 1;
  }
}