<svelte:options
  customElement={{
    tag: 'm-navigation-indicator',
    props: {
      player: { reflect: true, type: 'Boolean', attribute: 'player' },
    },
  }}
/>

<script lang="ts">
  import Button from '../button/Button.svelte';
  import IconButton from '../iconbutton/IconButton.svelte';
  import { PauseCircle24, PlayCircle24 } from '@mozaic-ds/icons-svelte';

  /**
   * A navigation indicator visually represents the current position within a sequence or step-based process, helping users track progress or navigate through a series of items. It is commonly used in carousels, onboarding flows, or media players. Navigation indicators can be interactive, allowing users to jump between steps, or passive, simply showing progress.
   * @event action {CustomEvent<void} - Emits when the action button is clicked.
   */

  interface Props {
    /**
     * The total number of steps to display.
     */
    steps: number;
    /**
     * The index of the currently active step (zero-based).
     */
    selected: number;
    /**
     * The current action state of the button. Can be "pause" to show the pause icon or "resume" to show the play icon.
     */
    action?: 'pause' | 'resume';
    /**
     * The text label displayed in the Resume or Pause button.
     */
    label?: string;
    /**
     * If `true`, hides the Resume or Pause button next to the steps.
     */
    player?: boolean;
    /**
     * Callback triggered on action button click.
     */
    onAction?: () => void;
  }

  let {
    steps,
    selected = $bindable(),
    action = 'resume',
    label,
    player = true,
    onAction,
  }: Props = $props();

  let element: HTMLElement;

  const ActionIcon = $derived(action === 'pause' ? PauseCircle24 : PlayCircle24);

  function setActiveStep(step: number) {
    selected = step;
  }

  function onKeydown(event: KeyboardEvent, step: number) {
    if (event.key === 'Enter') {
      setActiveStep(step);
    }
  }

  function handleAction() {
    onAction?.();
    element.dispatchEvent(new CustomEvent('action', { bubbles: true, composed: true }));
  }
</script>

<div
  bind:this={element}
  class="mc-navigation-indicator"
  role="navigation"
  aria-label="Navigations steps"
>
  <ul class="mc-navigation-indicator__list">
    {#each Array.from({ length: steps }), index (index)}
      <li class="mc-navigation-indicator__item">
        <button
          class={{
            'mc-navigation-indicator__button': true,
            'mc-navigation-indicator__button--active': selected == index,
          }}
          aria-label="Navigation step button"
          {...selected == index ? { 'aria-current': 'step' } : {}}
          onclick={() => setActiveStep(index)}
          onkeydown={(event) => onKeydown(event, index)}
        ></button>
      </li>
    {/each}
  </ul>

  {#if player}
    {#if label}
      <Button size="s" iconposition="left" ghost onclick={handleAction}>
        {label}

        <ActionIcon slot="icon" />
      </Button>
    {:else}
      <IconButton size="s" ghost onclick={handleAction}>
        <ActionIcon slot="icon" />
      </IconButton>
    {/if}
  {/if}
</div>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.mc-navigation-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 42rem;
  overflow: scroll;
}
.mc-navigation-indicator__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mc-navigation-indicator__item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mc-navigation-indicator__button {
  transition: box-shadow 200ms ease;
  width: 1.5rem;
  height: 0.5rem;
  border: none;
  border-radius: var(--border-radius-l, 1rem);
  background-color: var(--navigation-indicator-color-background-default, #c9d0de);
  cursor: pointer;
  transition: height 0.2s ease, height 0.2s ease, background-color 0.2s ease;
}
.mc-navigation-indicator__button: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;
}
.mc-navigation-indicator__button--active {
  width: 3rem;
  height: 0.75rem;
  background-color: var(--navigation-indicator-color-background-active, #464e63);
}</style>
