import type { Meta, StoryObj } from '@storybook/html';
import { Popover, type PopoverOptions } from '@42/core/popover';
import '@42/styles/popover.css';

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

const popover = new Popover(document.querySelector('[data-c42-popover]')!, {
  placement: 'bottom',
  trapFocus: false,
});

popover.on('popover:open', () => console.log('opened'));`;

const meta: Meta<PopoverOptions> = {
  title: 'Core/Overlays/Popover',
  tags: ['autodocs'],
  parameters: {
    docs: {
      source: { code: snippet, language: 'ts' },
    },
  },
  argTypes: {
    placement: {
      control: 'select',
      options: ['top', 'right', 'bottom', 'left', 'bottom-start', 'bottom-end'],
    },
    offset: { control: { type: 'number', min: 0 } },
    autoFocus: { control: 'boolean' },
    trapFocus: { control: 'boolean' },
  },
  args: {
    placement: 'bottom',
    offset: 8,
    autoFocus: true,
    trapFocus: false,
  },
  render: (args) => {
    const root = document.createElement('div');
    root.dataset.c42Popover = '';
    root.innerHTML = `
      <button data-c42-popover-trigger>Open popover</button>
      <div data-c42-popover-content>
        <p style="margin:0 0 .5rem">Interactive content with focusable items.</p>
        <a href="#link">A link</a>
        <button type="button">An action</button>
      </div>`;
    new Popover(root, args);
    return root;
  },
};

export default meta;

type Story = StoryObj<PopoverOptions>;

export const Default: Story = {};

export const Trapped: Story = {
  args: { trapFocus: true },
};

export const TopPlacement: Story = {
  args: { placement: 'top' },
};