import type { Meta, StoryObj } from '@storybook/html';
import { CommandPalette, type CommandPaletteOptions } from '@42/core/command-palette';
import '@42/styles/command-palette.css';

const snippet = `import { CommandPalette } from '@42/core/command-palette';
import '@42/styles/command-palette.css';

const palette = new CommandPalette(document.querySelector('[data-c42-command-palette]')!, {
  hotkey: 'k', // Cmd/Ctrl+K
});

palette.on('commandpalette:select', (e) => console.log(e.detail.value));`;

function build(): HTMLElement {
  const wrap = document.createElement('div');
  wrap.innerHTML = `
    <button type="button" data-open style="padding:0.5rem 0.875rem">
      Open palette (or press ⌘/Ctrl + K)
    </button>
    <div data-c42-command-palette>
      <div data-c42-command-overlay></div>
      <div data-c42-command-dialog>
        <input data-c42-command-input placeholder="Type a command or search…" aria-label="Command" />
        <div data-c42-command-list>
          <div data-c42-command-group data-label="Files">
            <button data-c42-command-item data-value="new" data-keywords="create add">New File</button>
            <button data-c42-command-item data-value="open" data-keywords="browse">Open File…</button>
            <button data-c42-command-item data-value="save">Save</button>
          </div>
          <div data-c42-command-group data-label="Edit">
            <button data-c42-command-item data-value="copy">Copy Selection</button>
            <button data-c42-command-item data-value="paste">Paste</button>
            <button data-c42-command-item data-value="find" data-keywords="search">Find &amp; Replace</button>
          </div>
          <div data-c42-command-group data-label="View">
            <button data-c42-command-item data-value="theme" data-keywords="dark light">Toggle Theme</button>
            <button data-c42-command-item data-value="zen">Zen Mode</button>
          </div>
          <div data-c42-command-empty>No matching commands</div>
        </div>
      </div>
    </div>`;
  return wrap;
}

const meta: Meta<CommandPaletteOptions> = {
  title: 'Core/Overlays/Command Palette',
  tags: ['autodocs'],
  parameters: {
    docs: {
      source: { code: snippet, language: 'ts' },
    },
  },
  argTypes: {
    hotkey: { control: 'text' },
    closeOnEscape: { control: 'boolean' },
    closeOnOverlayClick: { control: 'boolean' },
  },
  args: {
    hotkey: 'k',
    closeOnEscape: true,
    closeOnOverlayClick: true,
  },
  render: (args) => {
    const wrap = build();
    const root = wrap.querySelector<HTMLElement>('[data-c42-command-palette]')!;
    const palette = new CommandPalette(root, args);
    wrap.querySelector<HTMLElement>('[data-open]')!.addEventListener('click', () =>
      palette.openPalette(),
    );
    return wrap;
  },
};

export default meta;

type Story = StoryObj<CommandPaletteOptions>;

export const Default: Story = {};

export const OpenByDefault: Story = {
  args: { defaultOpen: true },
};