import type { Meta, StoryObj } from '@storybook/html';
import { Tabs, type TabsOptions } from '@42/core/tabs';
import { tabsSnippets } from '../framework-snippets';
import '@42/styles/tabs.css';

const meta: Meta<TabsOptions> = {
  title: 'Core/Navigation/Tabs',
  tags: ['autodocs'],
  parameters: {
    docs: {
      source: { code: tabsSnippets.vanilla, language: 'ts' },
    },
  },
  argTypes: {
    orientation: { control: 'radio', options: ['horizontal', 'vertical'] },
    activationMode: { control: 'radio', options: ['automatic', 'manual'] },
    defaultValue: { control: 'text' },
  },
  args: {
    orientation: 'horizontal',
    activationMode: 'automatic',
  },
  render: (args) => {
    const root = document.createElement('div');
    root.dataset.c42Tabs = '';
    root.innerHTML = `
      <div data-c42-tabs-list>
        <button data-c42-tabs-trigger data-value="account">Account</button>
        <button data-c42-tabs-trigger data-value="password">Password</button>
        <button data-c42-tabs-trigger data-value="team">Team</button>
      </div>
      <div data-c42-tabs-panel data-value="account">
        <p>Manage your account details and profile information.</p>
      </div>
      <div data-c42-tabs-panel data-value="password">
        <p>Change your password and security preferences.</p>
      </div>
      <div data-c42-tabs-panel data-value="team">
        <p>Invite teammates and manage their permissions.</p>
      </div>`;
    new Tabs(root, args);
    return root;
  },
};

export default meta;

type Story = StoryObj<TabsOptions>;

export const Default: Story = {};

export const Vertical: Story = {
  args: { orientation: 'vertical' },
};

export const Manual: Story = {
  args: { activationMode: 'manual' },
};

export const WithDefaultValue: Story = {
  args: { defaultValue: 'team' },
};