<svelte:options
  customElement={{
    tag: 'm-segmented-control',
    props: {
      full: { reflect: true, type: 'Boolean', attribute: 'full' },
    },
  }}
/>

<script lang="ts">
  /**
   * A Segmented Control allows users to switch between multiple options or views within a single container. It provides a compact and efficient way to toggle between sections without requiring a dropdown or separate navigation. Segmented Controls are commonly used in filters, tabbed navigation, and content selection to enhance user interaction and accessibility.
   *
   * @event change {CustomEvent<number | string | undefined>} - Emits when the selected segment changes.
   */
  interface Props {
    /**
     * Defines the currently active tab.
     *
     * - If a `number` is provided, it represents the index of the segment.
     * - If a `string` is provided, it must match the `id` of one of the segments.
     */
    selected?: number | string;
    /**
     * if `true`, the segmented control take the full width.
     */
    full?: boolean;
    /**
     * Determines the size of the segmented control.
     */
    size?: 's' | 'm';
    /**
     * An array of objects that allows you to provide all the data needed to generate the content for each segment.
     */
    segments: Array<{
      /**
       * Unique identifier for the segment.
       */
      id?: string;
      /**
       * The label displayed for the segment.
       */
      label: string;
    }>;
    /**
     * Callback fired when the selected segment changes.
     */
    onChange?: (index: number) => void;
  }

  let { selected = $bindable(0), full, size = 's', segments, onChange }: Props = $props();
  let element: HTMLElement;

  const onClick = (index: number, id?: string) => {
    const value = typeof selected === 'string' ? id || '' : index;
    selected = value;

    onChange?.(index);
    const event = new CustomEvent('change', {
      detail: value,
      bubbles: true,
      composed: true,
    });
    element.dispatchEvent(event);
  };

  const isSegmentSelected = (index: number, id?: string) => {
    const value = typeof selected === 'string' ? id || '' : index;
    return selected === value;
  };
</script>

<div
  class={[
    'mc-segmented-control',
    `mc-segmented-control--${size}`,
    full && 'mc-segmented-control--full',
  ]}
  role="radiogroup"
  bind:this={element}
>
  {#each segments as segment, index (index)}
    <button
      type="button"
      class={[
        'mc-segmented-control__segment',
        isSegmentSelected(index, segment.id) && 'mc-segmented-control__segment--selected',
      ]}
      role="radio"
      tabindex={isSegmentSelected(index, segment.id) ? 0 : -1}
      aria-checked={isSegmentSelected(index, segment.id) ? 'true' : 'false'}
      onclick={() => onClick(index, segment.id)}
    >
      {segment.label}
    </button>
  {/each}
</div>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.mc-segmented-control {
  display: inline-flex;
  background-color: var(--segmented-control-color-background-default, #ffffff);
  border: 1px solid var(--segmented-control-color-border, #cccccc);
  border-radius: 3rem;
  height: 2rem;
  padding: 0.25rem;
  box-sizing: border-box;
  gap: 0.25rem;
}
.mc-segmented-control__segment {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  color: var(--segmented-control-color-text-default, #666666);
  cursor: pointer;
  font-family: inherit;
  font-weight: var(--font-weight-semi-bold, 600);
  font-size: var(--font-size-100, 0.875rem);
  padding: 0 1rem;
  border-radius: 3rem;
  height: 1.5rem;
  width: 100%;
  transition: background-color 0.3s ease;
  white-space: nowrap;
}
.mc-segmented-control__segment:not(.mc-segmented-control__segment--selected):hover {
  background-color: var(--segmented-control-color-background-hover, rgba(0, 0, 0, 0.05));
}
.mc-segmented-control__segment--selected {
  color: var(--segmented-control-color-text-selected, #ffffff);
  background-color: var(--segmented-control-color-background-selected, #464e63);
}
.mc-segmented-control__segment: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-segmented-control--m {
  height: 3rem;
  padding: 0.5rem;
}
.mc-segmented-control--m .mc-segmented-control__segment {
  height: 2rem;
}
.mc-segmented-control--full {
  display: flex;
}</style>
