import type { Meta, StoryObj } from '@storybook/html';
import { Drawer, type DrawerOptions } from '@42/core/drawer';
import '@42/styles/drawer.css';
import '@42/styles/button.css';

const snippet = `import { Drawer } from '@42/core/drawer';
import '@42/styles/drawer.css';

const root = document.querySelector('[data-c42-drawer]')!;
const drawer = new Drawer(root, { side: 'right' });

document.querySelector('[data-open]')!
  .addEventListener('click', () => drawer.open());

drawer.on('drawer:open', () => console.log('opened'));
drawer.on('drawer:close', () => console.log('closed'));`;

const meta: Meta<DrawerOptions> = {
  title: 'Core/Overlays/Drawer',
  tags: ['autodocs'],
  parameters: {
    docs: {
      // Feeds Storybook's native "Show code" panel under the live example.
      source: { code: snippet, language: 'ts' },
    },
  },
  argTypes: {
    side: { control: 'radio', options: ['left', 'right', 'top', 'bottom'] },
    closeOnOverlayClick: { control: 'boolean' },
    closeOnEscape: { control: 'boolean' },
  },
  args: { side: 'right', closeOnOverlayClick: true, closeOnEscape: true },
  render: (args) => {
    const wrapper = document.createElement('div');
    wrapper.innerHTML = `
      <button class="c42-button" data-open>Open drawer</button>
      <div data-c42-drawer>
        <div data-c42-drawer-overlay></div>
        <div data-c42-drawer-content>
          <h2 style="margin-top:0">Headless drawer</h2>
          <p>Focus is trapped, scroll is locked and Escape closes the panel.</p>
          <button class="c42-button" data-variant="secondary" data-c42-drawer-close>Close</button>
        </div>
      </div>`;
    const root = wrapper.querySelector<HTMLElement>('[data-c42-drawer]')!;
    const drawer = new Drawer(root, args);
    wrapper
      .querySelector<HTMLElement>('[data-open]')!
      .addEventListener('click', () => drawer.open());
    return wrapper;
  },
};

export default meta;

type Story = StoryObj<DrawerOptions>;

export const Default: Story = {};

export const Left: Story = {
  args: { side: 'left' },
};

export const Top: Story = {
  args: { side: 'top' },
};

export const Bottom: Story = {
  args: { side: 'bottom' },
};