import type { Meta, StoryObj } from '@storybook/react'
import { CollapsibleBreadcrumb } from './CollapsibleBreadcrumb'

const meta: Meta<typeof CollapsibleBreadcrumb> = {
  title: 'Navigation/Breadcrumb/CollapsibleBreadcrumb',
  component: CollapsibleBreadcrumb,
}

export default meta
type Story = StoryObj<typeof CollapsibleBreadcrumb>

const items = Array.from({ length: 10 }, (_, i) => ({
  label: `Page ${i + 1}`,
  href: `#`,
}))

export const Default: Story = {
  render: (args, context) => {
    const openProp = context.viewMode === 'story' ? { defaultOpen: true } : {}
    return <CollapsibleBreadcrumb {...args} {...openProp} />
  },
  args: {
    items,
  },
}

export const WithoutEllipsis: Story = {
  args: {
    items: items.slice(0, 4),
  },
}

const CustomLink = ({
  href,
  children,
}: {
  href: string
  children: React.ReactNode
}) => {
  return <a href={href}>{children}</a>
}

export const WithCustomLink: Story = {
  args: {
    items: items.slice(0, 4),
    renderLink: ({ label, href }) => (
      <CustomLink href={href}>{label}</CustomLink>
    ),
  },
}

export const Gallery: Story = {
  render: (_args) => {
    const counts = [1, 2, 3, 4, 5, 10]

    return (
      <div className="flex flex-col gap-2">
        {counts.map((count) => {
          const items = Array.from({ length: count }, () => ({
            label: 'Page',
            href: `href`,
          }))
          return <CollapsibleBreadcrumb key={count} items={items} />
        })}
      </div>
    )
  },
}