import { Text } from "../../text";
import { Link } from "../../link";
import { Tabs } from "../index";

import { InputDeviceProvider } from "../../../utils/hooks/use-input-device";

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

const defaultTabProps: React.ComponentProps<typeof Tabs> = {
  defaultTab: "items",
  ariaLabel: "browse tabs",
  tabs: [
    {
      index: "items",
      tabName: "Items",
      count: 500,
      content: <Text css={{ color: "$light-off-white" }}>This is the items tab</Text>,
    },
    {
      index: "collections",
      tabName: "Collections",
      content: <Text css={{ color: "$light-off-white" }}>This is the Collections tab</Text>,
    },
    {
      index: "projects",
      tabName: "Projects",
      content: <Text css={{ color: "$light-off-white" }}>This is the Projects tab</Text>,
    },
    {
      index: "users",
      tabName: "Users",
      content: <Text css={{ color: "$light-off-white" }}>This is the Users tab</Text>,
    },
  ],
};

const meta: Meta<typeof Tabs> = {
  component: Tabs,
  title: "Tabs",
  decorators: [
    (Story) => {
      return (
        <InputDeviceProvider>
          <Story />
        </InputDeviceProvider>
      );
    },
  ],
  args: defaultTabProps,
  argTypes: {
    ariaLabel: {
      description: "aria label is applied on the `StyledList`",
    },
    defaultTab: {
      description:
        "The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs.",
      table: {},
    },
    tabs: {
      description: "the tabs to render.",
    },
    asChild: {
      description:
        "Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.",
    },
    listProps: {
      description:
        "Injected directly into to the __StyledList__ and is defined [here](https://www.radix-ui.com/docs/components/tabs#list)",
      table: {
        category: "Anatomy Props",
        type: { summary: "React.ComponentProps<typeof StyledList>" },
      },
    },
    triggerProps: {
      description:
        "Injected directly into to the __StyledTrigger__ and is defined [here](https://www.radix-ui.com/docs/components/tabs#trigger)",
      table: {
        category: "Anatomy Props",
        type: { summary: "React.ComponentProps<typeof StyledTrigger>" },
      },
    },
    contentProps: {
      description:
        "Injected directly into to the __StyledContent__ and is defined [here](https://www.radix-ui.com/docs/components/tabs#content)",
      table: {
        category: "Anatomy Props",
        type: { summary: "React.ComponentProps<typeof StyledContent>" },
      },
    },
  },
};
export default meta;

type Story = StoryObj<typeof Tabs>;
export const Default: Story = {
  render: (args) => {
    return <Tabs {...args} />;
  },
};

export const LinkTabs: Story = {
  render: (args) => {
    return <Tabs {...args} />;
  },
};
LinkTabs.args = {
  ...defaultTabProps,
  tabs: [
    {
      index: "items",
      tabName: <Link href="https://example.com/items">Items</Link>,
      count: 500,
      content: <Text css={{ color: "$light-off-white" }}>This is the items tab</Text>,
    },
    {
      index: "collections",
      tabName: <Link href="https://example.com/collections">Collections</Link>,
      content: <Text css={{ color: "$light-off-white" }}>This is the Collections tab</Text>,
    },
  ],
};