import { html } from 'lit';
import '@mozaic-ds/icons-svelte/components/Admin24/Admin24.svelte';
import '@mozaic-ds/icons-svelte/components/Coffee24/Coffee24.svelte';
import '@mozaic-ds/icons-svelte/components/Course24/Course24.svelte';
import '@mozaic-ds/icons-svelte/components/Release24/Release24.svelte';
import '@mozaic-ds/icons-svelte/components/Sample24/Sample24.svelte';
import '@mozaic-ds/icons-svelte/components/Palette24/Palette24.svelte';
import '@mozaic-ds/icons-svelte/components/Pantone24/Pantone24.svelte';
import './Sidebar.svelte';
import '../sidebarexpandableitem/SidebarExpandableItem.svelte';
import '../sidebarfooter/SidebarFooter.svelte';
import '../sidebarheader/SidebarHeader.svelte';
import '../sidebarnavitem/SidebarNavItem.svelte';
import '../sidebarshortcutitem/SidebarShortcutItem.svelte';
import '../sidebarshortcuts/SidebarShortcuts.svelte';
import { action } from 'storybook/actions';
const meta = {
    title: 'Structure/Sidebar',
    component: 'm-sidebar',
    parameters: {
        layout: 'fullscreen',
    },
    subcomponents: {
        'm-sidebar-header': 'm-sidebar-header',
        'm-sidebar-shortcuts': 'm-sidebar-shortcuts',
        'm-sidebar-shortcut-item': 'm-sidebar-shortcut-item',
        'm-sidebar-nav-item': 'm-sidebar-nav-item',
        'm-sidebar-footer': 'm-sidebar-footer',
    },
    tags: ['v2'],
    argTypes: {},
    args: {
        expanded: true,
    },
    globals: {
        backgrounds: { value: 'secondary' },
    },
    render: (args) => {
        return html `
      <m-sidebar
        ?expanded="${args.expanded}"
        @close="${action('close')}"
        @update:expanded="${action('update:expanded')}"
        @logout="${action('logout')}"
      >
        <m-sidebar-header
          slot="header"
          title="Adeo Design System"
          logo="/logo.svg"
        ></m-sidebar-header>

        <m-sidebar-shortcuts slot="shortcuts" ?stacked="${true}">
          <m-sidebar-shortcut-item label="Shortcut 01">
            <coffee-24 slot="icon"></coffee-24>
          </m-sidebar-shortcut-item>

          <m-sidebar-shortcut-item label="Shortcut 02">
            <course-24 slot="icon"></course-24>
          </m-sidebar-shortcut-item>
        </m-sidebar-shortcuts>

        <m-sidebar-nav-item slot="nav" label="Get started" href="#" ?active="${true}">
          <release-24 slot="icon"></release-24>
        </m-sidebar-nav-item>

        <m-sidebar-expandable-item
          slot="nav"
          menulabel="Sublist menu label"
          label="Design Tokens"
          href="#"
        >
          <sample-24 slot="icon"></sample-24>

          <m-sidebar-nav-item
            label="Subsection menu label 1"
            href="#"
            ?locked="${true}"
          ></m-sidebar-nav-item>

          <m-sidebar-nav-item
            label="Subsection menu label 2"
            href="#"
            ?external="${true}"
          ></m-sidebar-nav-item>
        </m-sidebar-expandable-item>

        <m-sidebar-nav-item slot="nav" label="Styles" href="#">
          <palette-24 slot="icon"></palette-24>
        </m-sidebar-nav-item>

        <m-sidebar-nav-item slot="nav" label="Components" href="#">
          <pantone-24 slot="icon"></pantone-24>
        </m-sidebar-nav-item>

        <m-sidebar-footer
          slot="footer"
          title="Dieter Rams"
          subtitle="Industrial designer"
          avatar="/images/Avatar.png"
          @logout="${action('logout')}"
        >
          <m-sidebar-nav-item label="Action 01" href="#">
            <admin-24 slot="icon"></admin-24>
          </m-sidebar-nav-item>

          <m-sidebar-nav-item label="Action 01" href="#">
            <admin-24 slot="icon"></admin-24>
          </m-sidebar-nav-item>

          <m-sidebar-nav-item label="Action 03" href="#">
            <admin-24 slot="icon"></admin-24>
          </m-sidebar-nav-item>

          <m-sidebar-nav-item label="Action 04" href="#">
            <admin-24 slot="icon"></admin-24>
          </m-sidebar-nav-item>
        </m-sidebar-footer>
      </m-sidebar>
    `;
    },
};
export default meta;
export const Default = {};
export const ExpandFeatureOnly = {
    render: (args) => {
        return html `
      <m-sidebar
        ?expanded="${args.expanded}"
        @update:expanded="${action('update:expanded')}"
        @close="${action('close')}"
        @logout="${action('logout')}"
      >
        <m-sidebar-header
          slot="header"
          title="Adeo Design System"
          logo="/logo.svg"
        ></m-sidebar-header>

        <m-sidebar-shortcuts slot="shortcuts" ?stacked="${true}">
          <m-sidebar-shortcut-item label="Shortcut 01">
            <coffee-24 slot="icon"></coffee-24>
          </m-sidebar-shortcut-item>

          <m-sidebar-shortcut-item label="Shortcut 02">
            <course-24 slot="icon"></course-24>
          </m-sidebar-shortcut-item>
        </m-sidebar-shortcuts>

        <m-sidebar-nav-item slot="nav" label="Get started" href="#" ?active="${true}">
          <release-24 slot="icon"></release-24>
        </m-sidebar-nav-item>

        <m-sidebar-expandable-item
          slot="nav"
          menulabel="Sublist menu label"
          label="Design Tokens"
          href="#"
        >
          <sample-24 slot="icon"></sample-24>

          <m-sidebar-nav-item
            label="Subsection menu label 1"
            href="#"
            ?locked="${true}"
          ></m-sidebar-nav-item>

          <m-sidebar-nav-item
            label="Subsection menu label 2"
            href="#"
            ?external="${true}"
          ></m-sidebar-nav-item>
        </m-sidebar-expandable-item>

        <m-sidebar-nav-item slot="nav" label="Styles" href="#">
          <palette-24 slot="icon"></palette-24>
        </m-sidebar-nav-item>

        <m-sidebar-nav-item slot="nav" label="Components" href="#">
          <pantone-24 slot="icon"></pantone-24>
        </m-sidebar-nav-item>

        <m-sidebar-footer slot="footer"></m-sidebar-footer>
      </m-sidebar>
    `;
    },
};
export const ProfileInfoOnly = {
    render: (args) => {
        return html `
      <m-sidebar
        ?expanded="${args.expanded}"
        @update:expanded="${action('update:expanded')}"
        @close="${action('close')}"
        @logout="${action('logout')}"
      >
        <m-sidebar-header
          slot="header"
          title="Adeo Design System"
          logo="/logo.svg"
        ></m-sidebar-header>

        <m-sidebar-shortcuts slot="shortcuts" ?stacked="${true}">
          <m-sidebar-shortcut-item label="Shortcut 01">
            <coffee-24 slot="icon"></coffee-24>
          </m-sidebar-shortcut-item>

          <m-sidebar-shortcut-item label="Shortcut 02">
            <course-24 slot="icon"></course-24>
          </m-sidebar-shortcut-item>
        </m-sidebar-shortcuts>

        <m-sidebar-nav-item slot="nav" label="Get started" href="#" ?active="${true}">
          <release-24 slot="icon"></release-24>
        </m-sidebar-nav-item>

        <m-sidebar-expandable-item
          slot="nav"
          menulabel="Sublist menu label"
          label="Design Tokens"
          href="#"
        >
          <sample-24 slot="icon"></sample-24>

          <m-sidebar-nav-item
            label="Subsection menu label 1"
            href="#"
            ?locked="${true}"
          ></m-sidebar-nav-item>

          <m-sidebar-nav-item
            label="Subsection menu label 2"
            href="#"
            ?external="${true}"
          ></m-sidebar-nav-item>
        </m-sidebar-expandable-item>

        <m-sidebar-nav-item slot="nav" label="Styles" href="#">
          <palette-24 slot="icon"></palette-24>
        </m-sidebar-nav-item>

        <m-sidebar-nav-item slot="nav" label="Components" href="#">
          <pantone-24 slot="icon"></pantone-24>
        </m-sidebar-nav-item>

        <m-sidebar-footer
          slot="footer"
          ?expandable=${false}
          title="Dieter Rams"
          subtitle="Industrial designer"
          avatar="/images/Avatar.png"
        >
          <m-sidebar-nav-item label="Action 01" href="#">
            <admin-24 slot="icon"></admin-24>
          </m-sidebar-nav-item>

          <m-sidebar-nav-item label="Action 01" href="#">
            <admin-24 slot="icon"></admin-24>
          </m-sidebar-nav-item>

          <m-sidebar-nav-item label="Action 03" href="#">
            <admin-24 slot="icon"></admin-24>
          </m-sidebar-nav-item>

          <m-sidebar-nav-item label="Action 04" href="#">
            <admin-24 slot="icon"></admin-24>
          </m-sidebar-nav-item>
        </m-sidebar-footer>
      </m-sidebar>
    `;
    },
};
export const SingleLevelOnly = {
    render: (args) => {
        return html `
      <m-sidebar
        ?expanded="${args.expanded}"
        @update:expanded="${action('update:expanded')}"
        @close="${action('close')}"
        @logout="${action('logout')}"
        <m-sidebar-header
          slot="header"
          title="Adeo Design System"
          logo="/logo.svg"
        ></m-sidebar-header>

        <m-sidebar-shortcuts slot="shortcuts" ?stacked="${true}">
          <m-sidebar-shortcut-item label="Shortcut 01">
            <coffee-24 slot="icon"></coffee-24>
          </m-sidebar-shortcut-item>

          <m-sidebar-shortcut-item label="Shortcut 02">
            <course-24 slot="icon"></course-24>
          </m-sidebar-shortcut-item>
        </m-sidebar-shortcuts>

        <m-sidebar-nav-item slot="nav" label="Get started" href="#" ?active="${true}">
          <release-24 slot="icon"></release-24>
        </m-sidebar-nav-item>

        <m-sidebar-nav-item slot="nav" label="Styles" href="#">
          <palette-24 slot="icon"></palette-24>
        </m-sidebar-nav-item>

        <m-sidebar-nav-item slot="nav" label="Components" href="#">
          <pantone-24 slot="icon"></pantone-24>
        </m-sidebar-nav-item>

        <m-sidebar-footer
          slot="footer"
          title="Dieter Rams"
          subtitle="Industrial designer"
          avatar="/images/Avatar.png"
        >
          <m-sidebar-nav-item label="Action 01" href="#">
            <admin-24 slot="icon"></admin-24>
          </m-sidebar-nav-item>

          <m-sidebar-nav-item label="Action 01" href="#">
            <admin-24 slot="icon"></admin-24>
          </m-sidebar-nav-item>

          <m-sidebar-nav-item label="Action 03" href="#">
            <admin-24 slot="icon"></admin-24>
          </m-sidebar-nav-item>

          <m-sidebar-nav-item label="Action 04" href="#">
            <admin-24 slot="icon"></admin-24>
          </m-sidebar-nav-item>
        </m-sidebar-footer>
      </m-sidebar>
    `;
    },
};
