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

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

$progressBarBaseClass: '#{constants.$prefix}progress-bar';
$progressBarLabelClass: '#{$progressBarBaseClass}__label';
$progressBarTrackClass: '#{$progressBarBaseClass}__track';
$progressBarIndicatorClass: '#{$progressBarBaseClass}__indicator';
$progressBarStatusClass: '#{$progressBarBaseClass}__status';

$indicatorColorByState: (
  'active': tokens.$bm-comp-progress-bar-color-indicator-default,
  'success': tokens.$bm-comp-progress-bar-color-indicator-success,
  'error': tokens.$bm-comp-progress-bar-color-indicator-error,
);

.#{$progressBarBaseClass} {
  display: flex;
  align-items: stretch;
  flex-direction: column;

  .#{$progressBarLabelClass} {
    margin-bottom: tokens.$bm-comp-progress-bar-space-label-bottom;
    font: tokens.$bm-comp-progress-bar-typo-label;
    color: tokens.$bm-comp-progress-bar-color-label;
  }

  .#{$progressBarTrackClass} {
    height: tokens.$bm-comp-progress-bar-size-md-height;
    border-radius: tokens.$bm-comp-progress-bar-radius;
    background-color: tokens.$bm-comp-progress-bar-color-track;
    display: flex;
    overflow: hidden;
  }

  .#{$progressBarStatusClass} {
    margin-top: tokens.$bm-comp-progress-bar-space-status-top;
  }

  &--sm {
    .#{$progressBarTrackClass} {
      height: tokens.$bm-comp-progress-bar-size-sm-height;
    }
  }

  &--lg {
    .#{$progressBarTrackClass} {
      height: tokens.$bm-comp-progress-bar-size-lg-height;
    }
  }

  &--full-width {
    .#{$progressBarTrackClass} {
      border-radius: 0;
    }
  }

  @each $state, $indicatorColor in $indicatorColorByState {
    &--#{$state} {
      .#{$progressBarIndicatorClass} {
        background-color: $indicatorColor;
      }
    }
  }

  &--determinate {
    .#{$progressBarIndicatorClass} {
      transition-property: width;
      transition-duration: 300ms;
      transition-timing-function: ease-out;
    }
  }

  // Sass simply doesn't like & appearing after the beginning of the selector, but it doesn't mind it wrapped in #{}
  // https://stackoverflow.com/a/47653943
  &--indeterminate#{&}--active {
    .#{$progressBarIndicatorClass} {
      width: 100%;
      mask-image: linear-gradient(
        to right,
        transparent calc(50% - 100% / 14.4),
        black 50%,
        transparent calc(50% + 100% / 14.4)
      );
      mask-size: 240%;
      mask-repeat: no-repeat;
      mask-position: center;
      animation: 2s linear infinite bm-progress-bar-indeterminate-indicator-animation;

      &:dir(rtl) {
        animation-direction: reverse;
      }
    }
  }
}

@keyframes bm-progress-bar-indeterminate-indicator-animation {
  0% {
    mask-position: right;
  }

  100% {
    mask-position: left;
  }
}