@use 'sass:map';

@use './shared' as *;
@use './design' as *;

$progress: () !default;
$progress: map.merge(
  (
    track-bg-color: value('fill-color-humble'),
    filler-bg-color: value('color-primary-base'),
    info-color: inherit,
    info-color-inside: value('color-white'),
    info-color-bubble: inherit,
    percentage-font-size: value('font-size-secondary'),
    activated-color: rgba(#fff, 0.4),
    activated-dir: 1,
    animation-duration: 2400ms,
    animation-timing: ease
  ),
  $progress
);

.#{$namespace}-progress {
  &-vars {
    @include define-preset-values('progress', $progress);
  }

  @mixin define-progress-style($style-map) {
    @include define-preset-style('progress', $style-map);
  }

  @include basis {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
  }

  &__track {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 1;
    background-color: value('progress-track-bg-color');
  }

  $percent-translate: translateX(calc(#{value('progress-percentage')} * 1% - 100%));
  $percent-translate-rtl: translateX(calc(100% - #{value('progress-percentage')} * 1%));
  $activated-scale: scaleX(calc(#{value('progress-percentage')} * 0.01));

  &__filler {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    background-color: value('progress-filler-bg-color');
    transition: value('transition-transform');
    transform: $percent-translate;
    will-change: transform;

    @include rtl {
      transform: $percent-translate-rtl;
    }
  }

  &--activated &__filler::after {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    content: '';
    background-color: value('progress-activated-color');
    transform-origin: right;
    animation: #{$namespace}-progress-flowing value('progress-animation-duration')
      value('progress-animation-timing') infinite;

    @include rtl {
      @include define-css-var('progress-activated-dir', -1);

      transform-origin: left;
    }
  }

  @keyframes #{$namespace}-progress-flowing {
    0% {
      opacity: 100%;
      transform: translateX(
          calc(#{value('progress-percentage')} * #{value('progress-activated-dir')} * -1%)
        )
        scaleX(0);
    }

    70% {
      opacity: 0%;
      transform: translateX(0) $activated-scale;
    }

    100% {
      opacity: 0%;
      transform: translateX(0) $activated-scale;
    }
  }

  &__info {
    display: flex;
    align-items: center;
    margin-inline-start: 8px;
    color: value('progress-info-color');
    pointer-events: none;
  }

  &--info-inside &__info {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    justify-content: flex-end;
    width: 100%;
    padding-inline-end: 8px;
    margin: 0;
    color: value('progress-info-color-inside');
    transition: value('transition-transform');
    transform: $percent-translate;

    @include rtl {
      transform: $percent-translate-rtl;
    }
  }

  &--info-bubble &__info,
  &--info-bubble-top &__info,
  &--info-bubble-bottom &__info {
    min-width: auto;
    min-height: auto;
    padding: 1px 4px;
    margin: 0;
    color: value('progress-info-color-bubble');
  }

  &--info--none &__info {
    display: none;
  }

  &__percentage {
    font-size: value('progress-percentage-font-size');
    pointer-events: auto;
  }

  &__reference {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    pointer-events: none;
    transition: value('transition-transform');
    transform: $percent-translate;

    @include rtl {
      transform: $percent-translate-rtl;
    }
  }

  &__bubble {
    position: absolute;
    inset-inline-end: 0;
    pointer-events: auto;
    transform: translateX(50%);

    @include rtl {
      transform: translateX(-50%);
    }
  }

  $states: success, error, warning;

  @each $state in $states {
    &--#{$state} {
      @include define-progress-style(
        (
          filler-bg-color: 'color' $state 'base'
        )
      );
    }
  }
}