import { html } from 'lit';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import './ActionBottomBar.svelte';
import '../statusmessage/StatusMessage.svelte';
import '../button/Button.svelte';
// Icons
import '@mozaic-ds/icons-svelte/components/Refresh24/Refresh24.svelte';
import '@mozaic-ds/icons-svelte/components/Cross24/Cross24.svelte';
import '@mozaic-ds/icons-svelte/components/Check24/Check24.svelte';
const meta = {
    title: 'Structure/Action Bottom Bar',
    component: 'm-action-bottom-bar',
    tags: ['v2'],
    parameters: {
        layout: 'fullscreen',
        docs: {
            story: { height: '150px' },
        },
    },
    args: {
        left: `
      <m-status-message slot="left" status="warning" label="999 unsaved changes"></m-status-message>
    `,
        right: `
      <m-button slot="right" size="s" ghost="true">
        Reset
      </m-button>
      <m-button slot="right" size="s" outlined="true" appearance="danger">
        Delete
      </m-button>
      <m-button slot="right" size="s" appearance="accent">
        Save
      </m-button>
    `,
    },
    render: (args) => html `
    <m-action-bottom-bar ?shadow=${args.shadow}>
      ${unsafeHTML(ifDefined(args.left))} ${unsafeHTML(ifDefined(args.right))}
    </m-action-bottom-bar>
  `,
};
export default meta;
export const Default = {};
export const Shadow = {
    args: {
        shadow: true,
    },
};
export const Unsaved = {
    args: {
        right: `
      <m-button slot="right" size="s" appearance="accent">
        Save
      </m-button>
    `,
    },
};
export const SaveInProgress = {
    args: {
        left: `
      <m-status-message slot="left" status="inprogress" label="Saving changes"></m-status-message>
    `,
        right: `
      <m-button slot="right" size="s" appearance="accent">
        Save
      </m-button>
    `,
    },
};
export const Saved = {
    args: {
        left: `
      <m-status-message slot="left" status="success" label="Changes saved"></m-status-message>
    `,
        right: `
      <m-button slot="right" size="s" appearance="accent">
        Save
      </m-button>
    `,
    },
};
export const WithoutReset = {
    args: {
        right: `
      <m-button slot="right" size="s" outlined="true" appearance="danger">
        Delete
      </m-button>
      <m-button slot="right" size="s" appearance="accent">
        Save
      </m-button>
    `,
    },
};
export const WithoutDelete = {
    args: {
        right: `
      <m-button slot="right" size="s" appearance="accent">
        Save
      </m-button>
    `,
    },
};
export const Mobile = {
    args: {
        right: `
      <m-button 
        slot="right"
        ghost="true" 
        icon-position="only"
      >
        <refresh-24></refresh-24>
      </m-button>
      <m-button 
        slot="right"
        outlined="true" 
        appearance="danger" 
        icon-position="only"
      >
        <cross-24></cross-24>
      </m-button>
      <m-button 
        slot="right"
        appearance="accent"
        icon-position="only"
      >
        <check-24></check-24>
      </m-button>
    `,
    },
};
