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

import { PaymentMethodIcon } from './PaymentMethodIcon'
import { PaymentMethodEnum } from '@scandic-hotels/common/constants/paymentMethod'
import { Typography } from '../Typography'
import { expect } from 'storybook/test'

const methods = Object.values(PaymentMethodEnum).toSorted()

const meta: Meta<typeof PaymentMethodIcon> = {
  title: 'Components/Payment/PaymentMethodIcon',
  component: PaymentMethodIcon,
  parameters: {
    layout: 'centered',
  },
  argTypes: {
    paymentMethod: {
      control: { type: 'select' },
      options: methods,
      description: 'Payment method to display',
    },
    alt: {
      control: { type: 'text' },
      description: 'Alt text for the icon',
    },
  },
}
export default meta

type Story = StoryObj<typeof PaymentMethodIcon>

export const Playground: Story = {
  args: {
    paymentMethod: PaymentMethodEnum.visa,
    alt: 'Visa payment method',
  },
  play: async ({ canvas, args }) => {
    const img = await canvas.findByRole('img')

    expect(img).toBeInTheDocument()
    expect(img).toHaveAttribute('alt', args.alt)
  },
}

export const All: Story = {
  parameters: {
    layout: 'padded',
  },
  render: (args) => (
    <div
      style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fill, minmax(80px, 1fr))',
        gap: 16,
      }}
    >
      {methods.map((m) => (
        <div
          key={m}
          style={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            gap: 12,
            padding: 8,
            borderRadius: 8,
          }}
        >
          <PaymentMethodIcon {...args} paymentMethod={m} />
          <Typography variant="Label/xsRegular">
            <p>{m}</p>
          </Typography>
        </div>
      ))}
    </div>
  ),
  args: {
    paymentMethod: PaymentMethodEnum.visa,
  },
}