import type { Meta, StoryObj } from "@storybook/nextjs-vite"
import { fn } from "storybook/test"

import { Chips } from "./Chips.tsx"
import { ChipLink } from "../ChipLink/ChipLink.tsx"
import { ChipButton } from "../ChipButton/ChipButton.tsx"

import { Default as ChipLinkDefault } from "../ChipLink/ChipLink.stories.tsx"
import { Default as ChipButtonDefault } from "../ChipButton/ChipButton.stories.tsx"

type StoryProps = React.ComponentPropsWithoutRef<typeof Chips> & {
  onPress: () => void
}

const meta: Meta<StoryProps> = {
  title: "Compositions/Chips",
  component: Chips,
  argTypes: {
    onPress: {
      table: {
        disable: true,
      },
    },
  },
}

export default meta

type Story = StoryObj<StoryProps>

export const Default: Story = {
  args: {
    onPress: fn(),
  },
  render: (args) => {
    return (
      <Chips>
        <ChipButton {...ChipButtonDefault.args} {...args} />
        <ChipButton {...ChipButtonDefault.args} {...args} />
        <ChipButton {...ChipButtonDefault.args} {...args} />
        <ChipLink {...ChipLinkDefault.args} {...args} />
        <ChipLink {...ChipLinkDefault.args} {...args} />
        <ChipLink {...ChipLinkDefault.args} {...args} />
        <ChipButton {...ChipButtonDefault.args} {...args} />
        <ChipButton {...ChipButtonDefault.args} {...args} />
        <ChipButton {...ChipButtonDefault.args} {...args} />
        <ChipLink {...ChipLinkDefault.args} {...args} />
        <ChipLink {...ChipLinkDefault.args} {...args} />
        <ChipLink {...ChipLinkDefault.args} {...args} />
        <ChipButton {...ChipButtonDefault.args} {...args} />
        <ChipButton {...ChipButtonDefault.args} {...args} />
        <ChipLink {...ChipLinkDefault.args} {...args} />
        <ChipButton {...ChipButtonDefault.args} {...args} />
        <ChipLink {...ChipLinkDefault.args} {...args} />
        <ChipLink {...ChipLinkDefault.args} {...args} />
        <ChipLink {...ChipLinkDefault.args} {...args} />
        <ChipButton {...ChipButtonDefault.args} {...args} />
      </Chips>
    )
  },
}