import {AddToCartButton} from '../components/commerce/add-to-cart'

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

const meta = {
  title: 'Commerce/AddToCartButton',
  component: AddToCartButton,
  parameters: {},
  tags: ['autodocs'],
  argTypes: {
    size: {
      control: 'radio',
      options: ['sm', 'default', 'lg'],
      description: 'Button size',
    },
    disabled: {
      control: 'boolean',
      description: 'Whether the button is disabled',
    },
    className: {
      control: 'text',
      description: 'Additional CSS classes',
    },
    productId: {
      control: 'text',
      description: 'The GID of the product (e.g. gid://shopify/Product/123)',
    },
    productVariantId: {
      control: 'text',
      description:
        'The GID of the product variant (e.g. gid://shopify/ProductVariant/456)',
    },
    discountCodes: {
      control: 'object',
      description: 'Array of discount codes to apply',
    },
  },
  args: {
    disabled: false,
    size: 'default',
    productId: 'gid://shopify/Product/123',
    productVariantId: 'gid://shopify/ProductVariant/456',
  },
} satisfies Meta<typeof AddToCartButton>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {},
  render: args => {
    return <AddToCartButton {...args} />
  },
}

export const SmallSize: Story = {
  args: {
    size: 'sm',
  },
  render: args => {
    return <AddToCartButton {...args} />
  },
}

export const LargeSize: Story = {
  args: {
    size: 'lg',
  },
  render: args => {
    return <AddToCartButton {...args} />
  },
}

export const WithDiscountCodes: Story = {
  args: {
    discountCodes: ['SUMMER20', 'FREESHIP'],
  },
  render: args => {
    return (
      <div className="space-y-2">
        <p className="text-sm text-gray-600">
          This button will apply discount codes:{' '}
          {args.discountCodes?.join(', ')}
        </p>
        <AddToCartButton {...args} />
      </div>
    )
  },
}

export const Disabled: Story = {
  args: {
    disabled: true,
  },
  render: args => {
    return <AddToCartButton {...args} />
  },
}

export const CustomStyling: Story = {
  args: {
    className: 'bg-purple-600 hover:bg-purple-700 text-white rounded-full px-8',
  },
  render: args => {
    return (
      <div className="space-y-2">
        <p className="text-sm text-gray-600">
          Custom styled button with additional classes
        </p>
        <AddToCartButton {...args} />
      </div>
    )
  },
}

export const AllSizes: Story = {
  render: () => {
    return (
      <div className="flex flex-col items-center space-y-4">
        <h3 className="text-lg font-semibold">Button Sizes</h3>
        <div className="flex gap-4 items-center">
          <AddToCartButton
            productId="gid://shopify/Product/123"
            productVariantId="gid://shopify/ProductVariant/456"
            size="sm"
          />
          <AddToCartButton
            productId="gid://shopify/Product/123"
            productVariantId="gid://shopify/ProductVariant/456"
            size="default"
          />
          <AddToCartButton
            productId="gid://shopify/Product/123"
            productVariantId="gid://shopify/ProductVariant/456"
            size="lg"
          />
        </div>
      </div>
    )
  },
}

export const InteractiveExample: Story = {
  render: () => {
    return (
      <div className="flex flex-col items-center space-y-6 p-8">
        <div className="text-center">
          <h3 className="text-lg font-semibold">Interactive Demo</h3>
          <p className="text-sm text-gray-600 mt-2">
            Click the buttons below to see the add to cart animation
          </p>
        </div>

        <div className="grid gap-4">
          <div className="text-center">
            <p className="text-xs text-gray-500 mb-2">Product A</p>
            <AddToCartButton
              productId="gid://shopify/Product/111"
              productVariantId="gid://shopify/ProductVariant/111"
            />
          </div>

          <div className="text-center">
            <p className="text-xs text-gray-500 mb-2">
              Product B (with discount)
            </p>
            <AddToCartButton
              productId="gid://shopify/Product/222"
              productVariantId="gid://shopify/ProductVariant/222"
              discountCodes={['SAVE10']}
            />
          </div>

          <div className="text-center">
            <p className="text-xs text-gray-500 mb-2">Product C (small size)</p>
            <AddToCartButton
              productId="gid://shopify/Product/333"
              productVariantId="gid://shopify/ProductVariant/333"
              size="sm"
            />
          </div>
        </div>
      </div>
    )
  },
}
