import { Meta, StoryObj } from "@storybook/nextjs-vite";
import { Email } from "./Email";
import { fn } from "storybook/test";
import {
  LayoutQuestion,
  LayoutQuestionProps,
} from "@/components/layout/LayoutQuestion/LayoutQuestion";
import Image from "next/image";

const layoutQuestionProps: Omit<LayoutQuestionProps, "children"> = {
  headerProps: {
    onBack: fn(),
  },
  title: {
    children: "Портрет твоей второй половинки готов! Куда нам его отправить?",
    align: "center",
  },
  contentProps: {
    className: "pt-0!",
  },
};

/** Reusable Email page Component */
const meta: Meta<typeof Email> = {
  title: "Templates/Email",
  component: Email,
  tags: ["autodocs"],
  parameters: {
    layout: "fullscreen",
  },
  args: {
    textInputProps: {
      label: "Email",
      placeholder: "Enter your Email",
      type: "email",
      onChange: fn(),
    },
    bottomActionButtonProps: {
      actionButtonProps: {
        children: "Continue",
        onClick: fn(),
      },
    },
    image: (
      <Image
        src="/male-portrait.jpg"
        alt="male portrait"
        width={164}
        height={245}
        className="mt-3.5 rounded-[50px] blur-sm"
      />
    ),
    privacyTermsConsentProps: {
      privacyPolicy: {
        children: "Privacy Policy",
        href: "#privacy-policy",
      },
      termsOfUse: {
        children: "Terms of use",
        href: "#terms-of-use",
      },
    },
    privacySecurityBannerProps: {
      text: {
        children:
          "Мы не передаем личную информацию, она остаётся в безопасности и под вашим контролем.",
      },
    },
  },
  argTypes: {
    textInputProps: {
      control: { type: "object" },
    },
    bottomActionButtonProps: {
      control: { type: "object" },
    },
  },
  render: (args) => {
    return (
      <LayoutQuestion {...layoutQuestionProps}>
        <Email {...args} />
      </LayoutQuestion>
    );
  },
};

export default meta;
type Story = StoryObj<typeof meta>;

export const Default = {} satisfies Story;

export const FemalePortrait = {
  args: {
    image: (
      <Image
        src="/female-portrait.jpg"
        alt="female portrait"
        width={164}
        height={245}
        className="mt-3.5 rounded-[50px] blur-sm"
      />
    ),
  },
} satisfies Story;