/* eslint-disable react-hooks/rules-of-hooks */
/* eslint-disable no-console */
import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
import type { Meta, StoryObj } from "@storybook/react";
import { useRef } from "react";
import { useForm } from "react-hook-form";

import type { FormHandles } from "@/components/form/form";
import { ThemeProviderDecorators } from "@/storybook/Decorator";

import { MasterpassRegisterForm } from "./masterpass-register-form";

const meta = {
  title: "Widgets/Payment/MasterpassRegisterForm",
  component: MasterpassRegisterForm,
  tags: ["autodocs"],
  decorators: ThemeProviderDecorators,
  parameters: {
    // 👇 The viewports object from the Essentials addon
    viewport: {
      // 👇 The viewports you want to use
      viewports: INITIAL_VIEWPORTS,
      // 👇 Your own default viewport
    },
  },
} satisfies Meta<typeof MasterpassRegisterForm>;

export default meta;

type Story = StoryObj<typeof MasterpassRegisterForm>;

interface FormType {
  rtaPan: string;
  cardHolderName: string;
  expiryDate: string;
  cvc: string;
  accountAliasName: string;
  msisdn: {
    phoneNumber: string;
    dialCode: string;
  };
}

export const DefaultCreditCardInfos: Story = {
  render: () => {
    const formRef = useRef<FormHandles>(null);
    const methods = useForm<FormType>();
    return (
      <div className="flex w-[750px] gap-4">
        <MasterpassRegisterForm
          methods={methods}
          onSubmit={(value) => console.log(value)}
          masterpassFormRef={formRef}
        />
      </div>
    );
  },
};