import { html } from 'lit-html';
import '../../mercury-dialog.js';

/**
 * MercuryDialog base story.
 */
export const MercuryDialog = ({
  hideCloseButton,
  dock,
  dockable,
  content,
  modal,
  moveable,
  resizable,
  title,
  open,
  push
}) => {

  const openButton = modal
    ? html`<button id="openDialogButton" onclick="document.getElementById('mercuryDialog').showModal()">Open Modal</button>`
    : html`<button id="openDialogButton" onclick="document.getElementById('mercuryDialog').show()">Open Dialog</button>`

  return html`
    <mercury-dialog
      id="mercuryDialog"
      type="mercury-dialog"
      title="${title}"
      ?hide-close-button=${hideCloseButton}
      ?open=${open}
      ?push=${push}
      ?dockable=${dockable}
      ?moveable=${moveable}
      ?resizable=${resizable}
      ?modal=${modal}
      dock="${dock}"
    >
      ${content}
    </mercury-dialog>

    <!-- Trigger the dialog -->
    ${openButton}
  `;
};
