import React, { useCallback, useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';

import type { TabType } from './Tabs';
import { Tabs } from './Tabs';

const meta: Meta<typeof Tabs> = {
  title: 'UI kit/Tabs',
  component: Tabs,
  tags: ['autodocs'],
  render: ({ tabs, activeTabId: activeTab, onTabChange: setActiveTab, autoActivate, orientation }) => {
    const [active, setActive] = useState(activeTab);
    const onSetActiveTab = useCallback(
      (
        tabId: string,
        event:
          | React.MouseEvent<HTMLAnchorElement, MouseEvent>
          | React.KeyboardEvent<HTMLAnchorElement | HTMLUListElement>
      ) => {
        setActive(tabId);
        setActiveTab(tabId, event);
      },
      [setActiveTab]
    );

    return (
      <Tabs
        tabs={tabs}
        activeTabId={active}
        onTabChange={onSetActiveTab}
        autoActivate={autoActivate}
        orientation={orientation}
      />
    );
  },
  args: {
    activeTabId: 'tab-1',
    tabs: [
      { id: 'tab-1', title: 'Label Tab 1', content: <div>Content 1</div>, UNSAFE_error: true },
      { id: 'tab-2', title: 'Label Tab 2', content: <div>Content 2</div> },
      { id: 'tab-3', title: 'Label Tab 3', content: <div>Content 3</div> },
      { id: 'tab-4', title: 'Label Tab 4', content: <div>Content 4</div> },
      { id: 'tab-5', title: 'Label Tab 5', content: <div>Content 5</div> },
      { id: 'tab-6', title: 'Label Tab 6', content: <div>Content 6</div> },
      { id: 'tab-7', title: 'Label Tab 7', content: <div>Content 7</div> },
      { id: 'tab-8', title: 'Label Tab 8', content: <div>Content 8</div>, adminOnly: true },
    ] satisfies Array<TabType<string>>,
    onTabChange: (tabId: string) => {
      console.log(`Tab ${tabId} clicked.`);
    },
    autoActivate: true,
    orientation: 'horizontal',
  },
};

export default meta;
type Story = StoryObj<typeof Tabs>;

export const Default: Story = {
  args: {},
};