import { html } from 'lit';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import './PageHeader.svelte';
import '../iconbutton/IconButton.svelte';
import '../select/Select.svelte';
import '../tabs/Tabs.svelte';
import '../tab/Tab.svelte';
import { action } from 'storybook/actions';
const meta = {
    title: 'Structure/Page Header',
    component: 'm-page-header',
    parameters: {
        layout: 'fullscreen',
        docs: {
            story: { height: '250px' },
        },
    },
    args: {
        title: 'Page header title',
        backbutton: true,
        status: 'info',
        statuslabel: 'Information',
        extrainfo: 'Additional information',
        actions: `
      <m-icon-button ghost aria-label="Search button" slot="actions">
        <search-24 slot="icon"></search-24>
      </m-icon-button>
      <m-icon-button ghost aria-label="Help button" slot="actions">
        <help-circle-24 slot="icon"></help-circle-24>
      </m-icon-button>
      <m-icon-button ghost aria-label="Notification button" slot="actions">
        <notification-24 slot="icon"></notification-24>
      </m-icon-button>
      <m-select
        slot="actions"
        id="scope-select"
        aria-label="Scope select" 
        size="s"
        placeholder="Choose a scope"
      ></m-select>
    `,
        tabs: `
      <m-tabs slot="tabs">
        <m-tab slot="tab" selected="true">label</m-tab>
        <m-tab slot="tab">label</m-tab>
        <m-tab slot="tab">label</m-tab>
        <m-tab slot="tab">label</m-tab>
      </m-tabs>
    `,
    },
    argTypes: {},
    render: (args) => {
        return html `
      <m-page-header
        title="${ifDefined(args.title)}"
        ?backbutton="${args.backbutton}"
        status="${ifDefined(args.status)}"
        statuslabel="${ifDefined(args.statuslabel)}"
        extrainfo="${ifDefined(args.extrainfo)}"
        @back="${action('back')}"
        @toggle-menu="${action('toggle-menu')}"
      >
        ${unsafeHTML(ifDefined(args.content))} ${unsafeHTML(ifDefined(args.actions))}
        ${unsafeHTML(ifDefined(args.tabs))}
      </m-page-header>
    `;
    },
};
export default meta;
export const Default = {};
export const Basic = {
    args: {
        backbutton: undefined,
        status: undefined,
        statuslabel: undefined,
        extrainfo: undefined,
        actions: undefined,
        tabs: undefined,
    },
};
