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 './Toaster.svelte';
import '../button/Button.svelte';
import '../link/Link.svelte';
const meta = {
    title: 'Overlay/Toaster',
    component: 'm-toaster',
    tags: ['v2'],
    parameters: {
        layout: 'fullscreen',
        docs: {
            story: { height: '300px' },
        },
    },
    argTypes: {
        position: {
            control: 'radio',
            options: ['top', 'bottom', 'top-center', 'bottom-center'],
        },
        status: {
            control: 'radio',
            options: ['info', 'success', 'warning', 'error'],
        },
        'update:open': {
            control: false,
        },
        '--toaster-z-index': {
            description: 'Customise the z-index of the toaster',
            control: false,
            table: {
                category: 'Custom Properties',
                type: { summary: 'number' },
                defaultValue: { summary: '4' },
            },
        },
    },
    args: {
        open: true,
        description: 'This message must be short, be concise.',
    },
    render: (args) => {
        const handleUpdateOpen = action('update:open');
        return html `
      <m-toaster
        open=${ifDefined(args.open)}
        position=${ifDefined(args.position)}
        status=${ifDefined(args.status)}
        description=${ifDefined(args.description)}
        ?closable=${args.closable}
        progress=${ifDefined(args.progress)}
        timeout=${ifDefined(args.timeout)}
        @update:open=${handleUpdateOpen}
      >
        ${unsafeHTML(ifDefined(args.action))}
      </m-toaster>
    `;
    },
};
export default meta;
export const Info = {};
export const Success = {
    args: { status: 'success' },
};
export const Warning = {
    args: { status: 'warning' },
};
export const Error = {
    args: { status: 'error' },
};
export const Timeout = {
    args: { timeout: 5000 },
};
export const Button = {
    args: {
        action: `
      <m-button slot="action" size="s" appearance="inverse" outlined="true">Undo</m-button>
    `,
    },
};
export const Link = {
    args: {
        action: `
      <m-link slot="action" href="#" appearance="inverse">
        Learn more
      </m-link>
    `,
    },
};
