import {MerchantCard} from '../components/commerce/merchant-card'
import {createShop, injectMocks} from '../mocks'

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

type MerchantCardProps = React.ComponentProps<typeof MerchantCard>

const meta = {
  title: 'Commerce/MerchantCard',
  component: MerchantCard,
  parameters: {
    layout: 'padded',
  },
  argTypes: {
    touchable: {
      control: 'boolean',
    },
    featuredImagesLimit: {
      control: 'number',
    },
  },
  tags: ['autodocs'],
} satisfies Meta<MerchantCardProps>

export default meta
type Story = StoryObj<typeof meta>

injectMocks()

export const Default: Story = {
  decorators: [
    Story => (
      <div style={{maxWidth: 200}}>
        <Story />
      </div>
    ),
  ],
  args: {
    shop: {
      ...createShop('shop1', 'Amazing Store'),
      reviewAnalytics: {averageRating: 4.8, reviewCount: 1250},
    },
  },
}

export const CoverImageDark: Story = {
  decorators: [
    Story => (
      <div style={{maxWidth: 200}}>
        <Story />
      </div>
    ),
  ],
  name: 'Cover Image',
  args: {
    shop: createShop('cover3', 'Midnight Store', {
      themeType: 'coverImage',
      coverDominantColor: '#2C3E50',
    }),
  },
}

export const BrandColorWordmark: Story = {
  decorators: [
    Story => (
      <div style={{maxWidth: 200}}>
        <Story />
      </div>
    ),
  ],
  name: 'Brand Color + Wordmark',
  args: {
    shop: createShop('brand2', 'Amazing Store', {
      themeType: 'brandColor',
      wordmarkUrl:
        'https://merrypeople.com/cdn/shop/files/Transparent_Background_1.png?v=1696465429&width=1024',
      primaryColor: '#E3F2FD',
    }),
  },
}

export const Grid: Story = {
  decorators: [
    () => (
      <div className="grid grid-cols-2 gap-4">
        {/* Default */}
        <MerchantCard
          shop={{
            ...createShop('shop1', 'Amazing Store'),
            reviewAnalytics: {averageRating: 4.8, reviewCount: 1250},
          }}
        />

        {/* Cover Image (Dark) */}
        <MerchantCard
          shop={createShop('cover3', 'Amazing Store', {
            themeType: 'coverImage',
            coverDominantColor: '#2C3E50',
          })}
        />

        {/* Brand Color + Wordmark (Light) */}
        <MerchantCard
          shop={createShop('brand2', 'Amazing Store', {
            themeType: 'brandColor',
            wordmarkUrl:
              'https://merrypeople.com/cdn/shop/files/Transparent_Background_1.png?v=1696465429&width=1024',
            primaryColor: '#E3F2FD',
          })}
        />

        {/* Brand Color + Wordmark (Dark) */}
        <MerchantCard
          shop={createShop('brand4', 'Amazing Store', {
            themeType: 'brandColor',
            wordmarkUrl:
              'https://merrypeople.com/cdn/shop/files/Transparent_Background_1.png?v=1696465429&width=1024',
            primaryColor: '#808080',
          })}
        />
      </div>
    ),
  ],
  args: {
    shop: createShop('shop1', 'Amazing Store'),
  },
}
