import { action } from 'storybook/actions';
import { html } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';
import '../button/Button.svelte';
import './ActionListbox.svelte';
import '../actionlistboxitem/ActionListboxItem.svelte';
import '@mozaic-ds/icons-svelte/components/Copy20/Copy20.svelte';
import '@mozaic-ds/icons-svelte/components/ArrowTopRight20/ArrowTopRight20.svelte';
import '@mozaic-ds/icons-svelte/components/Download20/Download20.svelte';
import '@mozaic-ds/icons-svelte/components/Trash20/Trash20.svelte';
const meta = {
    title: 'Overlay/ Action Listbox',
    component: 'm-action-listbox',
    subcomponents: { 'm-action-listbox-item': 'm-action-listbox-item' },
    argTypes: {
        position: {
            control: 'radio',
            options: ['top', 'bottom', 'left', 'right'],
            table: {
                defaultValue: {
                    summary: 'bottom',
                },
            },
        },
    },
    args: {
        title: 'Listbox title (optional)',
        position: 'bottom',
    },
    render: (args) => html `
    <m-action-listbox
      title="${ifDefined(args.title)}"
      position="${ifDefined(args.position)}"
      ?open="${args.open}"
      @close="${action('close')}"
    >
      <m-action-listbox-item
        slot="item"
        label="Duplicate"
        disabled="true"
        @click="${action('click')}"
      >
        <copy-20 slot="icon"></copy-20>
      </m-action-listbox-item>

      <m-action-listbox-item slot="item" label="Move to..." @click="${action('click')}">
        <arrow-top-right-20 slot="icon"></arrow-top-right-20>
      </m-action-listbox-item>

      <m-action-listbox-item slot="item" label="Download" @click="${action('click')}">
        <download-20 slot="icon"></download-20>
      </m-action-listbox-item>

      <m-action-listbox-item
        slot="item"
        label="Delete"
        appearance="danger"
        divider="true"
        @click="${action('click')}"
      >
        <trash-20 slot="icon"></trash-20>
      </m-action-listbox-item>
    </m-action-listbox>
  `,
};
export default meta;
export const Default = {};
export const Activator = {
    parameters: {
        layout: 'centered',
    },
    args: {
        open: false,
    },
    render: (args) => html `
    <m-action-listbox
      title="${ifDefined(args.title)}"
      position="${ifDefined(args.position)}"
      ?open="${args.open}"
      @close="${action('close')}"
    >
      <m-action-listbox-item
        slot="item"
        label="Duplicate"
        disabled="true"
        @click="${action('click')}"
      >
        <copy-20 slot="icon"></copy-20>
      </m-action-listbox-item>

      <m-action-listbox-item slot="item" label="Move to..." @click="${action('click')}">
        <arrow-top-right-20 slot="icon"></arrow-top-right-20>
      </m-action-listbox-item>

      <m-action-listbox-item slot="item" label="Download" @click="${action('click')}">
        <download-20 slot="icon"></download-20>
      </m-action-listbox-item>

      <m-action-listbox-item
        slot="item"
        label="Delete"
        appearance="danger"
        divider="true"
        @click="${action('click')}"
      >
        <trash-20 slot="icon"></trash-20>
      </m-action-listbox-item>

      <m-button
        slot="activator"
        @click="${() => {
        const listbox = document.querySelector('m-action-listbox');
        listbox.open = !listbox.open;
    }}"
      >
        Activator
      </m-button>
    </m-action-listbox>
  `,
};
