import React, { ComponentProps, ComponentType } from "react";
import type { Meta, StoryObj } from "@storybook/react";

import { Tabs } from "../components/tab/Tabs";
import type { ButtonSize } from "../components/button/types";

const sizeOptions: ButtonSize[] = ["tiny", "small", "default", "large"];

const disabled = {
  table: {
    disable: true,
  },
};

const meta = {
  title: "Components/Inputs/Tabs",
  component: Tabs,
  argTypes: {
    size: {
      name: "Size",
      options: sizeOptions,
      control: { type: "select" },
    },
    asChild: disabled,
  },
} satisfies Meta<
  ComponentType<ComponentProps<typeof Tabs> & { size?: ButtonSize }>
>;

export default meta;
type Story = StoryObj<ComponentProps<typeof Tabs> & { size?: ButtonSize }>;

export const Default: Story = {
  render: ({ size }) => (
    <Tabs>
      <div className="border-0 border-b border-solid border-N30">
        <Tabs.List>
          <Tabs.Trigger size={size} value="tab1">
            test
          </Tabs.Trigger>
          <Tabs.Trigger size={size} value="tab2">
            <span className="inline-flex items-center">
              another
              <span className="ml-6 inline-block rounded-4 bg-Y300 px-[3px] py-[1px] text-75 leading-75 text-N0">
                6
              </span>
            </span>
          </Tabs.Trigger>
        </Tabs.List>
      </div>
      <Tabs.Content value="tab1">test</Tabs.Content>
      <Tabs.Content value="tab2">another</Tabs.Content>
    </Tabs>
  ),
  args: {
    size: "small",
  },
};

export const OnlyTab: Story = {
  render: ({ size }) => (
    <Tabs>
      <Tabs.List>
        <Tabs.Trigger size={size} value="tab1">
          test
        </Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="tab1">test</Tabs.Content>
    </Tabs>
  ),
  args: {
    size: "small",
  },
};
