import { action } from 'storybook/actions';
import { html } from 'lit';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import './AccordionList.svelte';
import '../accordionlistItem/AccordionListItem.svelte';
import '@mozaic-ds/icons-svelte/components/Wrench32/Wrench32.svelte';
import '@mozaic-ds/icons-svelte/components/Project32/Project32.svelte';
import '@mozaic-ds/icons-svelte/components/Sharpening32/Sharpening32.svelte';
const meta = {
    title: 'Content/Accordion List',
    component: 'm-accordion-list',
    subcomponents: { AccordionListItem: 'm-accordion-list-item' },
    tags: ['v2'],
    args: {
        value: ['1'],
        default: `
    <m-accordion-list-item title="How does the delivery work?" id="1">
        <p slot="content">
          Delivery is completed within 2 to 5 business days. You will receive a confirmation email
          with a tracking number as soon as your order is shipped.
        </p>
      </m-accordion-list-item>

      <m-accordion-list-item title="What payment methods are accepted?" id="2">
        <p slot="content">
          We accept credit cards (Visa, Mastercard, American Express), PayPal, and bank transfers.
        </p>
      </m-accordion-list-item>

      <m-accordion-list-item title="Can I return an item?">
        <p slot="content">
          Yes, you have 30 days to return an item in its original condition. Return shipping costs
          are at your expense unless the product is defective..
        </p>
      </m-accordion-list-item>
    `,
    },
    render: (args) => html `
    <m-accordion-list
      appearance="${ifDefined(args.appearance)}"
      value="${args.value?.join(',')}"
      @update:open="${action('update:open')}"
    >
      ${unsafeHTML(ifDefined(args.default))}
    </m-accordion-list>
  `,
};
export default meta;
export const Default = {};
export const Ghost = {
    args: {
        appearance: 'ghost',
    },
};
export const WithIcons = {
    args: {
        default: `
    <m-accordion-list-item title="How does the delivery work?">
        <wrench-32 slot="icon"></wrench-32>

        <p slot="content">
          Delivery is completed within 2 to 5 business days. You will receive a confirmation email
          with a tracking number as soon as your order is shipped.
        </p>
      </m-accordion-list-item>

      <m-accordion-list-item title="What payment methods are accepted?">
        <project-32 slot="icon"></project-32>

        <p slot="content">
          We accept credit cards (Visa, Mastercard, American Express), PayPal, and bank transfers.
        </p>
      </m-accordion-list-item>

      <m-accordion-list-item title="Can I return an item?">
        <sharpening-32 slot="icon"></sharpening-32>

        <p slot="content">
          Yes, you have 30 days to return an item in its original condition. Return shipping costs
          are at your expense unless the product is defective..
        </p>
      </m-accordion-list-item>`,
    },
};
export const WithSubtitle = {
    args: {
        default: `
      <m-accordion-list-item
        title="How does the delivery work?"
        subtitle="Shipping & tracking information"
      >
        <p slot="content">
          Delivery is completed within 2 to 5 business days. You will receive a confirmation email
          with a tracking number as soon as your order is shipped.
        </p>
      </m-accordion-list-item>

      <m-accordion-list-item
        title="What payment methods are accepted?"
        subtitle="Payments & billing options"
      >
        <p slot="content">
          We accept credit cards (Visa, Mastercard, American Express), PayPal, and bank transfers.
        </p>
      </m-accordion-list-item>

      <m-accordion-list-item title="Can I return an item?" subtitle="Returns & refund policy">
        <p slot="content">
          Yes, you have 30 days to return an item in its original condition. Return shipping costs
          are at your expense unless the product is defective..
        </p>
      </m-accordion-list-item>
    `,
    },
};
export const WithSingleBehavior = {
    args: {
        default: `
      <m-accordion-list-item title="How does the delivery work?">
        <p slot="content">
          Delivery is completed within 2 to 5 business days. You will receive a confirmation email
          with a tracking number as soon as your order is shipped.
        </p>
      </m-accordion-list-item>

      <m-accordion-list-item title="What payment methods are accepted?">
        <p slot="content">
          We accept credit cards (Visa, Mastercard, American Express), PayPal, and bank transfers.
        </p>
      </m-accordion-list-item>

      <m-accordion-list-item title="Can I return an item?">
        <p slot="content">
          Yes, you have 30 days to return an item in its original condition. Return shipping costs
          are at your expense unless the product is defective..
        </p>
      </m-accordion-list-item>
    `,
    },
};
