@use 'sass:map';
@use '@mezzanine-ui/system/effect' as effect;
@use '@mezzanine-ui/system/motion' as motion;
@use '@mezzanine-ui/system/palette';
@use '@mezzanine-ui/system/radius';
@use '@mezzanine-ui/system/spacing';
@use '@mezzanine-ui/system/transition';
@use '@mezzanine-ui/system/typography';
@use './stepper' as *;

$status-colors: (
  processing: (
    title-color: palette.semantic-variable(text, neutral-solid),
    description-color: palette.semantic-variable(text, neutral),
    status-indicator-color: palette.semantic-variable(icon, brand),
    status-indicator-background-color: palette.semantic-variable(background, brand-subtle),
    line-color: palette.semantic-variable(border, neutral-light),
  ),
  pending: (
    title-color: palette.semantic-variable(text, neutral),
    description-color: palette.semantic-variable(text, neutral),
    status-indicator-color: palette.semantic-variable(icon, neutral-light),
    status-indicator-background-color: none,
    line-color: palette.semantic-variable(border, neutral-light),
  ),
  succeeded: (
    title-color: palette.semantic-variable(text, neutral-solid),
    description-color: palette.semantic-variable(text, neutral),
    status-indicator-color: palette.semantic-variable(icon, brand),
    status-indicator-background-color: none,
    line-color: palette.semantic-variable(border, brand),
  ),
  error: (
    title-color: palette.semantic-variable(text, error),
    description-color: palette.semantic-variable(text, neutral),
    status-indicator-color: palette.semantic-variable(icon, error),
    status-indicator-background-color: none,
    line-color: palette.semantic-variable(border, neutral-light),
  ),
  processing-error: (
    title-color: palette.semantic-variable(text, error),
    description-color: palette.semantic-variable(text, neutral),
    status-indicator-color: palette.semantic-variable(icon, error),
    status-indicator-background-color: palette.semantic-variable(background, error-subtle),
    line-color: palette.semantic-variable(border, neutral-light),
  ),
);

@function _get-status-color($status, $property) {
  $status-map: map.get($status-colors, $status);

  @if $status-map {
    $value: map.get($status-map, $property);

    @if $value == none {
      @return null;
    } @else {
      @return $value;
    }
  }

  @return null;
}

.#{$prefix} {
  display: flex;
  justify-content: space-between;

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

$dotBoxShadowMargin: #{spacing.semantic-variable(size, element, tiny)};

@keyframes stepper-dot-breath {
  0% {
    box-shadow: 0 0 0 0 transparent;
  }

  50% {
    box-shadow: 0 0 0 #{$dotBoxShadowMargin} palette.semantic-variable(background, brand-subtle);
  }

  100% {
    box-shadow: 0 0 0 #{$dotBoxShadowMargin} transparent;
  }
}

@keyframes stepper-dot-breath-error {
  0% {
    box-shadow: 0 0 0 0 transparent;
  }

  50% {
    box-shadow: 0 0 0 #{$dotBoxShadowMargin} palette.semantic-variable(background, error-subtle);
  }

  100% {
    box-shadow: 0 0 0 #{$dotBoxShadowMargin} transparent;
  }
}

.#{$prefix-step} {
  &--interactive {
    border-radius: radius.variable(base);
    cursor: pointer;
    outline: none;

    &:focus-visible {
      box-shadow: effect.variable(focus, primary);
    }
  }

  // transitions
  .#{$prefix-step}__title, .#{$prefix-step}__description, .#{$prefix-step}__status-indicator {
    transition: transition.standard(color, fast);
  }
  .#{$prefix-step}__title-connect-line::after,
  .#{$prefix-step}__status-indicator::after,
  .#{$prefix-step}__status-indicator-dot::after {
    transition: transition.standard(background-color, fast);
  }
  .#{$prefix-step}__status-indicator-dot {
    transition: transition.standard(background-color, fast), transition.standard(box-shadow, fast);
  }

  &--horizontal {
    height: fit-content;
    min-width: spacing.semantic-variable(size, container, tight);

    // horizontal number
    &.#{$prefix-step}--number {
      display: flex;
      column-gap: spacing.semantic-variable(gap, tight);

      .#{$prefix-step}__text-container {
        display: grid;

        .#{$prefix-step}__title {
          display: flex;
          align-items: center;
          height: spacing.semantic-variable(size, element, relaxed);

          // for connect line
          column-gap: spacing.semantic-variable(gap, tight);

          .#{$prefix-step}__title-connect-line {
            position: relative;

            &::after {
              pointer-events: none;
              content: '';
              position: absolute;
              top: 50%;
              left: 100%;
              width: calc(var(--connect-line-distance, 0) - #{spacing.semantic-variable(size, element, tight)});
              height: 1px;
              transform: translateY(-50%);
            }
          }
        }
      }
    }

    // horizontal dot
    &.#{$prefix-step}--dot {
      display: grid;
      row-gap: spacing.semantic-variable(gap, base);
      justify-items: center;

      .#{$prefix-step}__text-container {
        display: grid;
        gap: spacing.semantic-variable(gap, tight);
        text-align: center;
      }

      .#{$prefix-step}__status-indicator-dot {
        position: relative;

        &::after {
          pointer-events: none;
          content: '';
          position: absolute;
          left: calc(100% + $dotBoxShadowMargin);
          top: 50%;
          width: calc(var(--connect-line-distance, 0) - $dotBoxShadowMargin - $dotBoxShadowMargin);
          height: 1px;
          transform: translateY(-50%);
        }
      }
    }
  }

  &--vertical {
    min-height: spacing.semantic-variable(size, container, collapsed);
    width: fit-content;

    // vertical number
    &.#{$prefix-step}--number {
      display: flex;
      column-gap: spacing.semantic-variable(gap, tight);
      align-items: flex-start;

      .#{$prefix-step}__status-indicator {
        position: relative;

        &::after {
          content: '';
          position: absolute;
          top: calc(100% + spacing.semantic-variable(gap, tiny));
          left: 50%;
          width: 1px;
          height: calc(var(--connect-line-distance, 0) - #{spacing.semantic-variable(gap, tiny)});
          transform: translateX(-50%);
        }
      }

      .#{$prefix-step}__text-container {
        display: grid;
        row-gap: spacing.semantic-variable(gap, tiny);

        .#{$prefix-step}__title {
          display: flex;
          align-items: center;
          height: spacing.semantic-variable(size, element, relaxed);
        }
      }
    }

    // vertical dot
    &.#{$prefix-step}--dot {
      display: flex;
      column-gap: spacing.semantic-variable(gap, base);
      align-items: flex-start;

      .#{$prefix-step}__status-indicator-dot {
        position: relative;
        margin-top: spacing.semantic-variable(size, element, tiny);

        &::after {
          content: '';
          position: absolute;
          top: calc(100% + spacing.semantic-variable(gap, tiny) + $dotBoxShadowMargin);
          left: 50%;
          width: 1px;
          height: calc(var(--connect-line-distance, 0) - #{spacing.semantic-variable(gap, tiny)} - $dotBoxShadowMargin);
          transform: translateX(-50%);
        }
      }

      .#{$prefix-step}__text-container {
        display: grid;
        row-gap: spacing.semantic-variable(gap, tiny);
      }
    }

  }

  @each $current-status, $colors in $status-colors {
    &--#{$current-status} {
      .#{$prefix-step}__status-indicator {
        color: _get-status-color($current-status, status-indicator-color);
      }

      .#{$prefix-step}__status-indicator-dot {
        background-color: _get-status-color($current-status, status-indicator-color);

        $status-indicator-background-color: _get-status-color($current-status, status-indicator-background-color);

        @if $status-indicator-background-color {
          box-shadow: 0 0 0 $dotBoxShadowMargin $status-indicator-background-color;
        }
      }

      .#{$prefix-step}__title {
        color: _get-status-color($current-status, title-color);
      }

      .#{$prefix-step}__description {
        color: _get-status-color($current-status, description-color);
      }

      // Connect line color based on status
      .#{$prefix-step}__title-connect-line::after,
      .#{$prefix-step}__status-indicator::after,
      .#{$prefix-step}__status-indicator-dot::after {
        background-color: _get-status-color($current-status, line-color);
      }
    }
  }

  &--dot {
    &.#{$prefix-step}--processing {
      .#{$prefix-step}__status-indicator-dot {
        @include motion.pattern(breathe, animation);

        animation-iteration-count: infinite;
        animation-name: stepper-dot-breath;
      }
    }

    &.#{$prefix-step}--processing-error {
      .#{$prefix-step}__status-indicator-dot {
        @include motion.pattern(breathe, animation);

        animation-iteration-count: infinite;
        animation-name: stepper-dot-breath-error;
      }
    }
  }

  &__status-indicator {
    width: spacing.semantic-variable(size, element, relaxed);
    height: spacing.semantic-variable(size, element, relaxed);
  }

  &__status-indicator-dot {
    width: spacing.semantic-variable(size, element, compact);
    height: spacing.semantic-variable(size, element, compact);
    border-radius: 100%;
  }
}