import type { Meta, StoryObj } from "@storybook/nextjs-vite"
import { expect, fn } from "storybook/test"

import { PaymentOptionsGroup } from "./PaymentOptionsGroup"
import { PaymentOption } from "./PaymentOption"
import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
import { FormDecorator } from "../../../../.storybook/decorators/FormDecorator"

const meta: Meta<typeof PaymentOptionsGroup> = {
  title: "Patterns/Form/Payment/PaymentOptionsGroup",
  component: PaymentOptionsGroup,
  decorators: [FormDecorator],
}
export default meta

type Story = StoryObj<typeof PaymentOptionsGroup>

export const Default: Story = {
  args: {
    label: "Select Payment Method",
    name: "paymentMethod",
    onChange: fn(),
    children: (
      <>
        <PaymentOption
          label="Visa"
          value={PaymentMethodEnum.visa}
          type={PaymentMethodEnum.visa}
        />
        <PaymentOption
          label="American Express"
          value={PaymentMethodEnum.americanExpress}
          type={PaymentMethodEnum.americanExpress}
        />
        <PaymentOption
          label="MasterCard"
          value={PaymentMethodEnum.masterCard}
          cardNumber="1234"
          type={PaymentMethodEnum.masterCard}
        />
      </>
    ),
  },
  play: async ({ canvas, userEvent, args }) => {
    const visaOption = await canvas.findByRole("radio", { name: "Visa" })
    expect(visaOption).toBeInTheDocument()

    expect(args.onChange).not.toHaveBeenCalled()
    await userEvent.click(visaOption)
    expect(args.onChange).toHaveBeenCalledWith("visa")
  },
}