import { html } from 'lit';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { action } from 'storybook/actions';
import '@mozaic-ds/icons-svelte/components/InfoCircle32/InfoCircle32.svelte';
import '@mozaic-ds/icons-svelte/components/ExternalLink24/ExternalLink24.svelte';
import './Modal.svelte';
import '../button/Button.svelte';
import '../link/Link.svelte';
const meta = {
    title: 'Overlay/Modal',
    component: 'm-modal',
    parameters: {
        layout: 'fullscreen',
        docs: {
            story: { height: '400px' },
        },
    },
    args: {
        open: true,
        title: 'Modal title',
        description: `A modal is a dialog window allowing you to focus the user's attention on a specific task, a piece of information or a mandatory action. It must be used for single action only and must have a call to action button in the bottom.`,
        footer: `
      <m-button ghost="true" slot="footer">Cancel</m-button>
      <m-button slot="footer">Primary action</m-button>
    `,
    },
    argTypes: {
        'update:open': {
            control: false,
        },
        '--modal-z-index': {
            description: 'Customise the z-index of the modal',
            control: false,
            table: {
                category: 'Custom Properties',
                type: { summary: 'number' },
                defaultValue: { summary: '3' },
            },
        },
    },
    render: (args) => {
        const handleUpdateOpen = action('update:open');
        return html `
      <m-modal
        ?open=${args.open}
        title=${ifDefined(args.title)}
        description=${ifDefined(args.description)}
        ?closable=${args.closable}
        @update:open=${handleUpdateOpen}
      >
        ${unsafeHTML(ifDefined(args.icon))} ${unsafeHTML(ifDefined(args.default))}
        ${unsafeHTML(ifDefined(args.link))} ${unsafeHTML(ifDefined(args.footer))}
      </m-modal>
    `;
    },
};
export default meta;
export const Default = {};
export const Icon = {
    args: {
        icon: '<info-circle-32 slot="icon"/>',
    },
};
export const ValidationOnly = {
    args: {
        footer: `
      <m-button slot="footer">Primary action</m-button>
    `,
    },
};
export const TwoOptions = {
    args: {
        footer: `
      <m-button outlined="true" slot="footer">Secondary action</m-button>
      <m-button slot="footer">Primary action</m-button>
    `,
    },
};
export const Cancel = {
    args: {
        footer: `
      <m-button ghost="true" slot="footer">Cancel</m-button>
      <m-button outlined="true" slot="footer">Secondary action</m-button>
      <m-button slot="footer">Primary action</m-button>
    `,
    },
};
export const Link = {
    args: {
        link: `
      <m-link href="#" size="m" iconPosition="right" slot="link">
        Learn more
        <external-link-24 slot="icon"></external-link-24>
      </m-link>
    `,
        footer: `
      <m-button ghost="true" slot="footer">Cancel</m-button>
      <m-button slot="footer">Primary action</m-button>
    `,
    },
};
export const Danger = {
    args: {
        footer: `
      <m-button ghost="true" slot="footer">Cancel</m-button>
      <m-button appearance="danger" slot="footer">Primary action</m-button>
    `,
    },
};
