@use '../utils/constants.scss';
@use '../utils/tokens.scss' as tokens;
@use '../utils/mixins.scss' as mixins;
@use './actionList.vars.scss' as actionListVars;
@use './icon.vars.scss' as iconVars;
@use '../utils/stateLayer.module.scss' as stateLayer;
@use '../utils/stateLayerVars.scss' as stateLayerVars;
@use './accordion.vars.scss' as accordionVars;

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

$sideNavBaseClass: '#{constants.$prefix}side-nav';
$transitionDuration: 0.3s;
$sideNavItemBaseClass: '#{$sideNavBaseClass}__action';
$desktopBreakpoint: 1200px;

@keyframes post-transition-effect {
  100% {
    overflow-x: unset;
  }
}

.#{$sideNavBaseClass}__wrapper {
  position: relative;
}

.#{$sideNavBaseClass} {
  display: flex;
  flex: 1;
  flex-direction: column;
  user-select: none;
  inset-block: 0;
  inset-inline-start: 0;
  align-items: center;
  z-index: 2;
  transition: inline-size $transitionDuration;
  background: tokens.$bm-comp-side-nav-color-bg;
  inline-size: 0px;
  position: relative;
  overflow-x: clip;
  height: 100%;

  .#{actionListVars.$actionListBaseClass} {
    width: 100%;
  }

  &--mobile-enabled {
    @media screen and (max-width: calc(#{$desktopBreakpoint} - 1px)) {
      display: none;

      &.#{$sideNavBaseClass}--interacted {
        display: flex;
      }
    }
  }

  &--floating {
    position: absolute;
  }

  &--rail {
    inline-size: tokens.$bm-comp-side-nav-size-rail;
    border-inline-end: tokens.$bm-sem-border-width-md solid
      tokens.$bm-comp-side-nav-color-border;
    box-sizing: content-box;

    @media screen and (max-width: calc(#{$desktopBreakpoint} - 1px)) {
      &.#{$sideNavBaseClass}--mobile-enabled {
        display: none;
      }
    }

    .#{$sideNavItemBaseClass} {
      .#{actionListVars.$actionListItemBaseClass} {
        &__content,
        &__content-after,
        &__content-flyout {
          width: 0;
          overflow: hidden;
          min-width: 0;
        }
      }
    }

    .#{$sideNavBaseClass}__header,
    .#{$sideNavBaseClass}__heading,
    .#{$sideNavBaseClass}__resize-handler,
    .#{$sideNavBaseClass}__body__nav-container,
    .#{$sideNavBaseClass}__footer__slot {
      display: none;
    }
  }

  &--drawer {
    border-inline-end: tokens.$bm-sem-border-width-md solid
      tokens.$bm-comp-side-nav-color-border;
    animation: post-transition-effect $transitionDuration both;

    .#{$sideNavBaseClass}__body__nav-container {
      @media screen and (min-width: $desktopBreakpoint) {
        display: none;
      }
    }
  }

  &__action {
    width: 100%;

    &.#{actionListVars.$actionListItemBaseClass} {
      padding-inline-start: tokens.$bm-comp-side-nav-space-item-start;
      text-decoration: none;
    }

    &--selected {
      .#{actionListVars.$actionListItemBaseClass}__content-before,
      .#{actionListVars.$actionListItemBaseClass}__content-after {
        #{iconVars.$iconColor}: tokens.$bm-comp-actionlist-color-icon-selected;
      }

      .#{actionListVars.$actionListItemBaseClass}__text {
        color: tokens.$bm-comp-actionlist-color-text-selected;
        font: tokens.$bm-comp-actionlist-typo-text-selected;
      }

      &::after {
        #{stateLayerVars.$right}: calc(
          -1 * #{tokens.$bm-comp-actionlist-size-state-offset}
        );
        #{stateLayerVars.$left}: calc(
          -1 * #{tokens.$bm-comp-actionlist-size-state-offset}
        );
        @extend %state-layer-base; // TODO: figure out an alternative to this to avoid bringing in the whole stateLayer module
        content: '';
        border-radius: tokens.$bm-comp-actionlist-radius;
        z-index: -2;
        background-color: #{tokens.$bm-sem-color-surface-selected};
        opacity: 1;
      }

      &::before {
        display: block;
        position: absolute;
        background: tokens.$bm-comp-actionlist-color-indicator;
        content: '';
        inset-inline-start: 0;
        transform: translateX(-50%);
        border-radius: tokens.$bm-comp-actionlist-radius-indicator;
        width: tokens.$bm-comp-actionlist-size-indicator-width;
        height: calc(100% - 2 * #{tokens.$bm-sem-space-75});
      }
    }

    &--expandable {
      &.#{$sideNavBaseClass}__action--selected {
        &::before {
          display: none;
        }
      }
    }
  }

  &__resize-handler {
    position: absolute;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    z-index: 100;
    width: calc(1.5rem / 2);
    height: 100%;
    inset-block-start: 0px;
    inset-inline-end: calc(-1.5rem / 2);
    display: flex;
    justify-content: start;

    &:hover,
    &:active {
      opacity: 1;
      cursor: col-resize;
      border-inline-start: solid tokens.$bm-sem-color-border-selected
        tokens.$bm-sem-border-width-lg;
    }

    &--hidden {
      display: none;
    }
  }

  &__backdrop {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    transition: all $transitionDuration;
    background: transparent;

    &--opaque {
      background: tokens.$bm-sem-color-overlay-black-40;
    }
  }

  &__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: tokens.$bm-comp-side-nav-space-heading-y;
    padding-inline-start: tokens.$bm-comp-side-nav-space-item-start;
    color: tokens.$bm-comp-actionlist-color-group-heading;
    white-space: nowrap;

    &__content {
      overflow: hidden;
      text-overflow: ellipsis;

      font-family: tokens.$bm-sem-font-family-label;
      font-size: 0.75rem;
      font-style: normal;
      font-weight: 600;
      line-height: 1.25rem;
    }
  }

  &__group {
    width: 100%;
  }

  &__header {
    display: flex;
    padding: tokens.$bm-sem-space-50 tokens.$bm-comp-side-nav-space-x;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
    gap: tokens.$bm-sem-space-50;
    overflow-x: clip;
  }

  &__footer {
    display: flex;
    padding: tokens.$bm-sem-space-50 tokens.$bm-comp-side-nav-space-x;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: tokens.$bm-sem-space-50;
    align-self: stretch;
    > div {
      width: 100%;
    }
  }

  &__body--scrolled-bottom + &__footer {
    border-block-start: 1px solid tokens.$bm-sem-color-border-01;
  }

  &__header:has(+ .#{$sideNavBaseClass}__body--scrolled-top) {
    border-block-end: 1px solid tokens.$bm-sem-color-border-01;
  }

  &__body {
    display: flex;
    padding-block: tokens.$bm-sem-space-50;
    padding-inline: tokens.$bm-comp-side-nav-space-x;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    align-self: stretch;
    overflow-y: auto;
    overflow-x: hidden;
    > div {
      width: 100%;
    }

    &__divider {
      margin: #{tokens.$bm-comp-actionlist-space-y} 0;
    }

    &__nav-container {
      padding-block-end: tokens.$bm-sem-space-150;
    }
  }

  .#{accordionVars.$accordionBaseClass} {
    position: relative;

    .#{actionListVars.$actionListItemBaseClass} {
      width: 100%;
    }

    &__chevron {
      display: none;
    }

    .#{accordionVars.$accordionBaseClass}__container {
      padding: 0;
      min-height: unset;
      flex-direction: row-reverse;
      gap: 0;

      &--expanded {
        .#{$sideNavItemBaseClass}__expandable-icon svg {
          will-change: transform;
          transition: transform 0.2s ease;
          transform: rotate(90deg);
        }
      }
    }

    section[class*='#{accordionVars.$accordionBaseClass}__panel'] {
      padding: 0;

      > div {
        padding-inline: 0.5rem;
        margin-inline: -0.5rem;
        overflow: unset;
        overflow-x: visible;
        overflow-y: hidden;
        gap: 0;
      }
    }

    .#{accordionVars.$accordionBaseClass}__heading {
      gap: 0;
      position: relative;

      .#{$sideNavItemBaseClass}__expandable-icon {
        #{stateLayerVars.getStateLayerSelector('&', 'focus-within')},
        #{stateLayerVars.getStateLayerSelector('&', 'focus-visible')},
        #{stateLayerVars.getStateLayerSelector('&', 'focus')},
        #{stateLayerVars.getStateLayerSelector('&', 'hover')},
        #{stateLayerVars.getStateLayerSelector('&', 'active')} {
          #{stateLayerVars.$background}: transparent;
        }

        & .#{stateLayerVars.$stateLayerBaseClass} {
          #{stateLayerVars.$top}: 0.125rem;
          #{stateLayerVars.$bottom}: 0.125rem;
          #{stateLayerVars.$left}: 0.125rem;
          #{stateLayerVars.$right}: 0.125rem;
          border-radius: tokens.$bm-sem-radius-sm;
        }

        z-index: 2;
        position: absolute;
        inset-inline-start: 0;
        transform: translateX(-50%);
        width: tokens.$bm-comp-btn-size-sm-icon;
        height: tokens.$bm-comp-btn-size-sm-icon;

        &:has(+ .#{$sideNavBaseClass}__action--selected) {
          color: tokens.$bm-comp-actionlist-color-indicator;
        }
      }
    }
  }
}