import type { ComponentProps } from "react"
import type { Meta, StoryObj } from "@storybook/nextjs-vite"
import { fn, expect } from "storybook/test"
import { SelectPaymentMethod } from "./index"
import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
import { FormDecorator } from "../../../../.storybook/decorators/FormDecorator"

const meta: Meta<typeof SelectPaymentMethod> = {
  title: "Patterns/Form/Payment/SelectCreditCard",
  component: SelectPaymentMethod,
  argTypes: {},
  decorators: [FormDecorator],
}

export default meta

type Story = StoryObj<typeof SelectPaymentMethod>

export const PrimaryDefault: Story = {
  args: {
    formName: "paymentMethod",
    onChange: fn(),
    paymentMethods: [
      {
        id: "klarna",
        alias: "Card 1",
        cardType: PaymentMethodEnum.klarna,
        truncatedNumber: "1234",
      },
      {
        id: "applePay",
        alias: "Card 2",
        cardType: PaymentMethodEnum.applePay,
        truncatedNumber: "1234",
      },
    ],
  } satisfies ComponentProps<typeof SelectPaymentMethod>,

  play: async ({ canvas, userEvent, args }) => {
    const options = await canvas.findAllByRole("radio")
    expect(options[0]).toBeInTheDocument()

    expect(args.onChange).not.toHaveBeenCalled()
    await userEvent.click(options[0])
    expect(args.onChange).toHaveBeenCalledWith("klarna")
  },
}