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: 'Components/Payment/SelectCreditCard',
  component: SelectPaymentMethod,
  argTypes: {},
  decorators: [FormDecorator],
}

export default meta

type Story = StoryObj<typeof SelectPaymentMethod>

export const PrimaryDefault: Story = {
  args: {
    onChange: fn(),
    paymentMethods: [
      {
        id: 'klarna',
        alias: 'Card 1',
        cardType: PaymentMethodEnum.klarna,
        truncatedNumber: '1234',
      },
      {
        id: 'applePay',
        alias: 'Card 2',
        cardType: PaymentMethodEnum.applePay,
        truncatedNumber: '1234',
      },
    ],
  },

  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')
  },
}