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 './Drawer.svelte';
import '../button/Button.svelte';
const meta = {
    title: 'Overlay/Drawer',
    component: 'm-drawer',
    tags: ['v2'],
    parameters: {
        layout: 'fullscreen',
        docs: {
            story: { height: '600px' },
        },
    },
    args: {
        open: true,
        title: 'Drawer title (optionnal)',
        contentTitle: 'Content title',
        default: `
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque
        odit, eligendi non, minus soluta dicta, excepturi harum tempora
        possimus dignissimos dolor rerum natus voluptatum quia. Architecto
        temporibus repellendus sed.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque
        odit, eligendi non, minus soluta dicta, excepturi harum tempora
        possimus dignissimos dolor rerum natus voluptatum quia. Architecto
        temporibus repellendus sed.
      </p>
    `,
        footer: `
      <m-button slot="footer">Button label</m-button>
      <m-button ghost="true" slot="footer">Button label</m-button>
    `,
    },
    argTypes: {
        position: {
            control: 'radio',
            options: ['left', 'right'],
        },
        'update:open': {
            control: false,
        },
        back: {
            control: false,
        },
        '--drawer-z-index': {
            description: 'Customise the z-index of the drawer',
            control: false,
            table: {
                category: 'Custom Properties',
                type: { summary: 'number' },
                defaultValue: { summary: '3' },
            },
        },
    },
    render: (args) => {
        const handleUpdateOpen = action('update:open');
        const onBack = action('back');
        return html `
      <m-drawer
        ?open=${args.open}
        title=${ifDefined(args.title)}
        contentTitle=${ifDefined(args.contentTitle)}
        position=${ifDefined(args.position)}
        ?back=${args.back}
        ?extended=${args.extended}
        closable=${ifDefined(args.closable)}
        @update:open=${handleUpdateOpen}
        @back=${onBack}
      >
        ${unsafeHTML(ifDefined(args.default))} ${unsafeHTML(ifDefined(args.footer))}
      </m-drawer>
    `;
    },
};
export default meta;
export const Default = {
    args: {
        default: `
      <!-- All the code below must be replaced by a form element. -->
      <div class="content-slot content-slot-full">
        Insert a form element here to replace this slot.
      </div>
    `,
    },
};
export const Left = {
    args: {
        position: 'left',
    },
};
export const Back = {
    args: {
        back: true,
    },
};
export const ValidationOnly = {
    args: {
        footer: `
      <m-button slot="footer">Button label</m-button>
    `,
    },
};
export const TwoOptions = {
    args: {
        footer: `
      <m-button outlined="true" slot="footer">Button label</m-button>
      <m-button slot="footer">Button label</m-button>
    `,
    },
};
export const Cancel = {
    args: {
        extended: true,
        footer: `
      <m-button ghost="true" slot="footer">Button label</m-button>
      <m-button outlined="true" slot="footer">Button label</m-button>
      <m-button slot="footer">Button label</m-button>
    `,
    },
};
