import type { Meta, StoryObj } from '@storybook/html';
import { Modal, type ModalOptions } from '@42/core/modal';
import { modalSnippets } from '../framework-snippets';
import '@42/styles/modal.css';
import '@42/styles/button.css';

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

export default meta;

type Story = StoryObj<ModalOptions>;

export const Default: Story = {};