import type { Meta, StoryObj } from '@storybook/html';
import { Nav, type NavOptions } from '@42/core/nav';
import '@42/styles/nav.css';

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

const nav = new Nav(document.querySelector('[data-c42-nav]')!, {
  defaultActive: 'profile',
  accordion: false,
});

nav.on('nav:select', (e) => console.log('go to', e.detail.value));`;

const meta: Meta<NavOptions> = {
  title: 'Core/Navigation/Nav',
  tags: ['autodocs'],
  parameters: {
    docs: {
      source: { code: snippet, language: 'ts' },
    },
  },
  argTypes: {
    accordion: { control: 'boolean' },
    collapsed: { control: 'boolean' },
    defaultActive: { control: 'text' },
  },
  args: {
    accordion: false,
    collapsed: false,
    defaultActive: 'home',
  },
  render: (args) => {
    const root = document.createElement('nav');
    root.dataset.c42Nav = '';
    root.setAttribute('aria-label', 'Main');
    root.innerHTML = `
      <button data-c42-nav-collapse aria-label="Collapse sidebar">⇔</button>
      <ul>
        <li><a data-c42-nav-item href="#home" data-value="home">🏠 Home</a></li>
        <li data-c42-nav-group>
          <button data-c42-nav-trigger data-value="settings">⚙ Settings</button>
          <ul data-c42-nav-submenu>
            <li><a data-c42-nav-item href="#profile" data-value="profile">Profile</a></li>
            <li><a data-c42-nav-item href="#team" data-value="team">Team</a></li>
          </ul>
        </li>
        <li data-c42-nav-group>
          <button data-c42-nav-trigger data-value="reports">📊 Reports</button>
          <ul data-c42-nav-submenu>
            <li><a data-c42-nav-item href="#sales" data-value="sales">Sales</a></li>
            <li><a data-c42-nav-item href="#traffic" data-value="traffic">Traffic</a></li>
          </ul>
        </li>
      </ul>`;
    new Nav(root, args);
    return root;
  },
};

export default meta;

type Story = StoryObj<NavOptions>;

export const Default: Story = {};

export const Accordion: Story = {
  args: { accordion: true, defaultActive: 'profile' },
};

export const Collapsed: Story = {
  args: { collapsed: true },
};