import {fn} from 'storybook/test'

import {ProductCard} from '../components/commerce/product-card'
import {createProduct, injectMocks} from '../mocks'

import type {Meta, StoryObj} from '@storybook/react-vite'

const meta = {
  title: 'Commerce/ProductCard',
  component: ProductCard,
  parameters: {
    layout: 'padded',
  },
  args: {onFavoriteToggled: fn()},
  argTypes: {
    variant: {
      control: 'radio',
      options: ['default', 'priceOverlay', 'compact'],
    },
    badgeVariant: {
      control: 'radio',
      options: ['default', 'secondary', 'destructive', 'outline'],
    },
    touchable: {
      control: 'boolean',
    },
  },
  tags: ['autodocs'],
} satisfies Meta<typeof ProductCard>

export default meta
type Story = StoryObj<typeof meta>

injectMocks()

export const Single: Story = {
  decorators: [
    Story => (
      <div style={{maxWidth: 150}}>
        <Story />
      </div>
    ),
  ],
  args: {
    product: {
      id: '1',
      title: 'Teapot',

      price: {
        amount: '100',
        currencyCode: 'USD',
      },

      compareAtPrice: {
        amount: '120',
        currencyCode: 'USD',
      },

      reviewAnalytics: {
        averageRating: 4.5,
        reviewCount: 10,
      },
      shop: {
        id: 'shop1',
        name: 'Mock Shop',
      },
      defaultVariantId: 'variant-1',
      isFavorited: true,

      featuredImage: {
        url: 'https://cdn.shopify.com/static/sample-images/teapot.jpg',
        altText: 'Teapot',
      },
    },
  },
}

export const Grid: Story = {
  decorators: [
    Story => (
      <div className="grid grid-cols-2 gap-4">
        <Story />
        <Story />
        <Story />
        <Story />
      </div>
    ),
  ],
  args: {
    product: createProduct('1', 'Teapot', '100', '120'),
  },
}
