import { html } from 'lit';
import { MercuryDialog } from './MercuryDialog';

// More on default export: https://storybook.js.org/docs/web-components/writing-stories/introduction#default-export
export default {
  title: 'Mercury Dialog',
  args: {
    dockable: false,
    resizable: false,
    modal: false,
    open: false,
    push: true,
    hideCloseButton: false,
  },
  // More on argTypes: https://storybook.js.org/docs/web-components/api/argtypes
  argTypes: {
    onClose: { action: 'onClose' },
    dockable: { control: 'boolean' },
    dock: {
      control: { type: 'select' },
      options: ['none', 'top', 'right', 'bottom', 'left'],
    },
    resizable: { control: 'boolean' },
    content: {
      disable: true,
    },
  },
};

// More on component templates: https://storybook.js.org/docs/web-components/writing-stories/introduction#using-args
const Template = (args) => MercuryDialog(args);

export const Dialog = Template.bind({});
// More on args: https://storybook.js.org/docs/web-components/writing-stories/args
Dialog.args = {
  content: html`<p>Dialog content. with a lot of text</p>`,
  title: 'Basic Dialog',
};

export const Modal = Template.bind({});
Modal.args = {
  content: html`<p>Dialog content. with a lot of text</p>`,
  title: 'Basic Modal',
  modal: true,
};

export const Resizable = Template.bind({});
Resizable.args = {
  content: html`<p>This dialog can be resized.</p>`,
  title: 'Basic Dialog',
  resizable: true
};

export const Open = Template.bind({});
Open.args = {
  content: html`<p>Dialog content</p>`,
  title: 'Open Dialog',
  open: true,
};

export const Dockable = Template.bind({});
Dockable.args = {
  content: html`<p>Dialog content</p>`,
  title: 'Open Dialog',
  dockable: true,
  dock: 'none',
  resizable: true
};

export const DockRight = Template.bind({});
DockRight.args = {
  content: html`<p>Dialog content</p>`,
  title: 'Open Dialog',
  dock: 'right',
  resizable: true,
  push: true,
  open: true
};

export const KitchenSink = Template.bind({});
KitchenSink.args = {
  content: html`<p>Dialog content. with a lot of text</p>`,
  title: 'Kitchen Sink',
  resizable: true,
  moveable: true,
  dockable: true,
  push: true,
};

export const HideCloseButton = Template.bind({});
HideCloseButton.args = {
  content: html`<p>Dialog content</p>`,
  title: 'Open Dialog',
  dock: 'right',
  resizable: true,
  push: true,
  open: true,
  hideCloseButton: true
};
