import type { Meta, StoryObj } from '@storybook/html';
import { MegaMenu, type MegaMenuOptions } from '@42/core/mega-menu';
import '@42/styles/mega-menu.css';

const snippet = `import { MegaMenu } from '@42/core/mega-menu';
import '@42/styles/mega-menu.css';

const menu = new MegaMenu(document.querySelector('[data-c42-mega-menu]')!, {
  openOnHover: true,
  closeDelay: 150,
});

menu.on('megamenu:open', (e) => console.log('opened', e.detail.value));`;

const meta: Meta<MegaMenuOptions> = {
  title: 'Core/Navigation/MegaMenu',
  tags: ['autodocs'],
  parameters: {
    docs: {
      source: { code: snippet, language: 'ts' },
    },
  },
  argTypes: {
    openOnHover: { control: 'boolean' },
    openDelay: { control: { type: 'number', min: 0, step: 50 } },
    closeDelay: { control: { type: 'number', min: 0, step: 50 } },
  },
  args: {
    openOnHover: true,
    openDelay: 0,
    closeDelay: 150,
  },
  render: (args) => {
    const root = document.createElement('nav');
    root.dataset.c42MegaMenu = '';
    root.setAttribute('aria-label', 'Main');
    root.innerHTML = `
      <ul>
        <li data-c42-mega-menu-item>
          <button data-c42-mega-menu-trigger data-value="products">Products ▾</button>
          <div data-c42-mega-menu-panel>
            <div>
              <strong>Platform</strong>
              <a href="#analytics">Analytics</a>
              <a href="#automation">Automation</a>
            </div>
            <div>
              <strong>Build</strong>
              <a href="#sdk">SDK</a>
              <a href="#api">API</a>
            </div>
            <div>
              <strong>Scale</strong>
              <a href="#cdn">CDN</a>
              <a href="#edge">Edge</a>
            </div>
          </div>
        </li>
        <li data-c42-mega-menu-item>
          <button data-c42-mega-menu-trigger data-value="solutions">Solutions ▾</button>
          <div data-c42-mega-menu-panel style="--c42-mega-columns:2;min-inline-size:22rem">
            <a href="#startups">For Startups</a>
            <a href="#enterprise">For Enterprise</a>
          </div>
        </li>
        <li data-c42-mega-menu-item>
          <a data-c42-mega-menu-trigger href="#pricing" data-value="pricing">Pricing</a>
        </li>
      </ul>`;
    new MegaMenu(root, args);
    return root;
  },
};

export default meta;

type Story = StoryObj<MegaMenuOptions>;

export const Default: Story = {};

export const ClickOnly: Story = {
  args: { openOnHover: false },
};