import {fn} from 'storybook/test'

import {List} from '../components/atoms/list'
import {ProductCard} from '../components/commerce/product-card'
import {ProductLink} from '../components/commerce/product-link'
import {createProduct, injectMocks} from '../mocks'

import type {Product} from '@shopify/shop-minis-platform'
import type {Meta, StoryObj} from '@storybook/react-vite'

const meta = {
  title: 'Atoms/List',
  component: List as any,
  parameters: {
    layout: 'padded',
  },
  argTypes: {
    height: {
      control: 'number',
      description: 'Height of the virtualized list container',
    },
  },
  tags: ['autodocs'],
} satisfies Meta<typeof List>

export default meta
type Story = StoryObj<typeof meta>

injectMocks()

const createProductList = (count: number) => {
  return Array.from({length: count}, (_, index) =>
    createProduct(`product-${index + 1}`, `Product ${index + 1}`, '9.99')
  )
}

export const ProductLinkList: Story = {
  args: {
    items: createProductList(50),
    height: 600,
    itemSizeForRow: () => 100,
    showScrollbar: true,
    renderItem: (product: Product) => (
      <div className="p-4">
        <ProductLink product={product} />
      </div>
    ),
  },
}

export const ProductGridList: Story = {
  args: {
    items: createProductList(20),
    height: 600,
    itemSizeForRow: () => 220,
    showScrollbar: true,
    renderItem: (product: Product) => (
      <div className="grid grid-cols-2 gap-4">
        <ProductCard product={product} onFavoriteToggled={fn()} />
        <ProductCard product={product} onFavoriteToggled={fn()} />
      </div>
    ),
  },
}
