<script lang="ts">
  import { Check24 } from '@mozaic-ds/icons-svelte';
  import { ChevronRight24 } from '@mozaic-ds/icons-svelte';
  /**
   * An inline stepper is a horizontal navigation component that displays a sequence of steps in a linear fashion. It helps users understand their progress through a multi-step process by visually indicating the current step, completed steps, and upcoming steps. Inline steppers are typically used in forms, onboarding flows, and checkout processes to enhance user experience and provide clarity on the workflow.
   */

  interface Props {
    [key: string]: any;
    /**
     * Defines the currently active step.
     *
     * - If a `number` is provided, it represents the 1-based position of the step
     *   in the `steps` array (e.g. `1` for the first step).
     * - If a `string` is provided, it must match the `id` of one of the steps.
     */
    step?: number | string;
    /**
     * Steps of the stepper inline.
     */
    steps?: Array<{
      /**
       * Uniquer identifier for the step.
       */
      id?: string;
      /**
       * Label of the step.
       */
      label: string;
      /**
       * Optional additional information under the label.
       */
      additionalinfo?: string;
    }>;
  }

  let { step = $bindable(0), steps = $bindable([]), class: className, ...attrs }: Props = $props();

  const activeStep = $derived.by(() => {
    if (typeof step === 'number') {
      return Math.min(Math.max(step, 1), steps.length) - 1;
    } else {
      const activeIndex = steps.findIndex((el) => el.id === step);
      return activeIndex === -1 ? 0 : activeIndex;
    }
  });

  const stepStates = $derived.by(() =>
    steps.map((_, i) => ({
      completed: i < activeStep,
      current: i === activeStep,
    })),
  );
</script>

<nav class={['mc-stepper-inline', className]} aria-label="Stepper" {...attrs}>
  <ol class="mc-stepper-inline__container">
    {#each steps as step, i (i)}
      {@const state = stepStates[i]}
      <li class={['mc-stepper-inline__item', state.completed ? 'is-completed' : '']}>
        {#if state.completed}
          <span class="mc-stepper-inline__icon mc-stepper-inline__icon--check" aria-hidden="true">
            <Check24 />
          </span>
        {:else}
          <span class={['mc-stepper-inline__circle', state.current ? 'is-current' : '']}>
            {i + 1}
          </span>
        {/if}
        <div class="mc-stepper-inline__content">
          <span class={['mc-stepper-inline__label', state.current ? 'is-current' : '']}>
            {step.label}
          </span>
        </div>
        {#if i < steps.length - 1}
          <span class="mc-stepper-inline__icon mc-stepper-inline__icon--chevron" aria-hidden="true">
            <ChevronRight24 />
          </span>
        {/if}
      </li>
    {/each}
  </ol>
</nav>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.mc-stepper-inline__container {
  display: flex;
  align-items: center;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.mc-stepper-inline__label {
  font-size: var(--font-size-100, 0.875rem);
  transition: color 200ms ease;
}
.mc-stepper-inline__label.is-current {
  font-weight: var(--font-weight-medium, 600);
  color: var(--stepper-color-step-label-active, #000000);
}
.mc-stepper-inline__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--stepper-color-step-label-default, #666666);
}
.mc-stepper-inline__item.is-completed:focus-visible {
  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
  outline: 0.125rem solid transparent;
  outline-offset: 0.125rem;
  border-radius: var(--border-radius-s, 0.25rem);
}
.mc-stepper-inline__item.is-completed:hover {
  cursor: pointer;
}
.mc-stepper-inline__item.is-completed:hover .mc-stepper-inline__label {
  text-decoration: underline;
}
.mc-stepper-inline__icon {
  fill: var(--stepper-color-information, #666666);
  display: flex;
  flex-shrink: 0;
}
.mc-stepper-inline__icon--check {
  box-sizing: border-box;
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--stepper-color-step-item-default-background, #ffffff);
  border: 0.125rem solid var(--stepper-color-information, #666666);
  border-radius: 1rem;
}
.mc-stepper-inline__icon--chevron {
  width: 1.25rem;
  height: 1.25rem;
}
.mc-stepper-inline__circle {
  box-sizing: border-box;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 0.125rem solid var(--stepper-color-information, #666666);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-100, 0.875rem);
  font-weight: var(--font-weight-medium, 600);
  color: var(--stepper-color-information, #666666);
  background-color: var(--stepper-color-step-item-default-background, #ffffff);
  flex-shrink: 0;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.mc-stepper-inline__circle.is-current {
  background-color: var(--stepper-color-step-item-active-background, #117f03);
  color: var(--stepper-color-step-item-active-text, #ffffff);
  border-color: transparent;
  animation: pop-in 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.mc-stepper-inline__content {
  display: flex;
  flex-direction: column;
  margin-right: 0.5rem;
}
.mc-stepper-inline__additional {
  font-size: var(--font-size-50, 0.75rem);
  color: var(--stepper-color-information, #666666);
}
.mc-stepper-inline__separator {
  color: var(--stepper-color-information, #666666);
  margin-left: 1rem;
}

@keyframes pop-in {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
:global(.mc-stepper-inline__icon) {
  align-items: center;
}</style>
