<svelte:options
  customElement={{
    tag: 'm-check-list-menu',
    props: {
      selected: { reflect: true, type: 'Number', attribute: 'selected' },
      outlined: { reflect: true, type: 'Boolean', attribute: 'outlined' },
    },
  }}
/>

<script lang="ts">
  import { CheckCircleFilled24 } from '@mozaic-ds/icons-svelte';
  import '../builtinmenu/BuiltInMenu.svelte';
  import '../builtinmenuitem/BuiltInMenuItem.svelte';

  type CheckListMenuItem = {
    label: string;
    href?: string;
    target?: '_self' | '_blank' | '_parent' | '_top';
    checked: boolean;
  };

  /**
   * A check-list menu is a structured vertical list where each item represents a distinct section of content. It enables users to navigate through and validate different parts of an interface in any order. Unlike linear steppers, this component offers flexibility by allowing non-sequential completion, making it ideal for user profile setup, application settings, or flexible onboarding processes where users can choose their own path through the experience.
   */
  interface Props {
    /**
     * Defines the menu items, each of which sets a checked state and act as a button, link, or router-link.
     */
    items: CheckListMenuItem[];
    /**
     * Specifies the key of the currently selected menu item. It allows the component to highlight or style the corresponding item to indicate it is selected or currently in use.
     */
    selected?: number;
    /**
     * When enabled, adds a visible border around the wrapper to highlight or separate its content.
     */
    outlined?: boolean;
  }

  let { selected = $bindable(), items, outlined }: Props = $props();
</script>

<m-built-in-menu {selected} {outlined}>
  {#each items as item, index (index)}
    {@const tag = item.href ? 'a' : 'button'}
    <m-built-in-menu-item
      slot="item"
      label={item.label}
      href={item.href}
      target={item.target}
      selected={selected === index}
      role={tag === 'button' ? 'menuitem' : undefined}
      onclick={() => (selected = index)}
    >
      {#if item.checked}
        <span
          slot="icon"
          class={{
            'mc-check-list-menu__icon': true,
            'mc-check-list-menu__icon--selected': selected === index,
          }}
        >
          <CheckCircleFilled24 />
        </span>
      {/if}
    </m-built-in-menu-item>
  {/each}
</m-built-in-menu>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.mc-check-list-menu__icon {
  fill: var(--built-in-menu-color-text-default, #404040);
}
.mc-check-list-menu__icon--selected {
  fill: var(--built-in-menu-color-text-selected, #006902);
}</style>
