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

const layoutQuestionProps = {
  headerProps: {
    progressProps: {
      value: (3 / 15) * 100,
      label: "3 of 15",
      className: "max-w-[198px]",
    },
    onBack: fn(),
  },
};

/** Reusable QuestionInformation page Component */
const meta: Meta<typeof QuestionInformation> = {
  title: "Templates/QuestionInformation",
  component: QuestionInformation,
  tags: ["autodocs"],
  parameters: {
    layout: "fullscreen",
  },
  args: {
    image: (
      <Image
        className=""
        src="/heart-in-fire.svg"
        alt="Information"
        width={251}
        height={167}
      />
    ),
    text: (
      <Typography as="p" size="2xl" className="leading-[40px]">
        По нашей статистике <b>51 % женщин Овнов</b> доверяются эмоциям. Но
        одной чувствительности мало. Мы покажем, какие качества второй половинки
        дадут тепло и уверенность, и изобразим её портрет.
      </Typography>
    ),
    bottomActionButtonProps: {
      actionButtonProps: {
        children: "Continue",
        onClick: fn(),
      },
    },
  },
  argTypes: {
    image: {
      control: { type: "object" },
    },
    text: {
      control: { type: "object" },
    },
    bottomActionButtonProps: {
      control: { type: "object" },
    },
  },
  render: (args) => {
    return (
      <LayoutQuestion {...layoutQuestionProps}>
        <QuestionInformation {...args} />
      </LayoutQuestion>
    );
  },
};

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

export const Default = {} satisfies Story;

export const WithoutImage = {
  args: {
    image: undefined,
  },
} satisfies Story;

export const WithoutText = {
  args: {
    text: undefined,
  },
} satisfies Story;

export const WithoutBottomButton = {
  args: {
    bottomActionButtonProps: undefined,
  },
} satisfies Story;
