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: "Product 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,
  },
}