import { html } from 'lit';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import './Popover.svelte';
import '../button/Button.svelte';
import '../link/Link.svelte';
import '@mozaic-ds/icons-svelte/components/ExternalLink24/ExternalLink24.svelte';
const meta = {
    title: 'Overlay/Popover',
    component: 'm-popover',
    tags: ['v2'],
    parameters: {
        layout: 'centered',
    },
    argTypes: {
        position: {
            control: 'radio',
            options: ['top', 'left', 'right', 'bottom'],
        },
        appearance: {
            control: 'radio',
            options: ['standard', 'inverse'],
        },
        size: {
            control: 'radio',
            options: ['s', 'm', 'l'],
        },
    },
    args: {
        open: true,
        title: 'Title',
        description: 'Description',
        footer: `
      <m-button slot="footer" size="s" aria-label="Popover action button">
        Button label
      </m-button>
    `,
    },
    render: (args) => {
        return html `
      <m-popover
        ?open="${args.open}"
        appearance="${ifDefined(args.appearance)}"
        position="${ifDefined(args.position)}"
        ?pointer="${args.pointer}"
        ?closable="${args.closable}"
        size="${ifDefined(args.size)}"
        title="${ifDefined(args.title)}"
        description="${ifDefined(args.description)}"
      >
        <m-button
          slot="activator"
          @click="${() => {
            const popover = document.querySelector('m-popover');
            popover.open = !popover.open;
        }}"
        >
          Activator
        </m-button>
        ${unsafeHTML(ifDefined(args.default))} ${unsafeHTML(ifDefined(args.footer))}
      </m-popover>
    `;
    },
};
export default meta;
export const Default = {};
export const Inverse = {
    args: {
        appearance: 'inverse',
        footer: `
      <m-link slot="footer" appearance="inverse" href="#" size="s" icon-position="right">
        Stand-alone link
        <template #icon><ExternalLink24 /></template>
      </m-link>
      <m-button slot="footer" appearance="inverse" size="s" aria-label="Popover action button">
        Button label
      </m-button>
    `,
    },
};
export const ValidationOnly = {
    args: {
        footer: `
      <m-button slot="footer" size="s" aria-label="Popover action button">
        Button label
      </m-button>
    `,
    },
};
export const TwoOptions = {
    args: {
        footer: `
      <m-button slot="footer" size="s" outlined aria-label="Popover action button">
        Button label
      </m-button>
      <m-button slot="footer" size="s" aria-label="Popover action button">
        Button label
      </m-button>
    `,
    },
};
export const Link = {
    args: {
        footer: `
      <m-link slot="footer" href="#" size="s" iconposition="right">
        Stand-alone link
        <external-link-24 slot="icon"></external-link-24>
      </m-link>
      <m-button slot="footer" size="s" aria-label="Popover action button">
        Button label
      </m-button>
    `,
    },
};
export const Navigation = {
    args: {
        footer: `
      <m-link slot="footer" href="#" size="s" iconposition="right">
        Stand-alone link
        <external-link-24 slot="icon"></external-link-24>
      </m-link>
    `,
    },
};
