import type { Meta, StoryObj } from '@storybook/react'
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>
    )
  },
}