import { Meta, StoryObj } from "@storybook/nextjs-vite";
import { QuestionSelectAnswers } from "./QuestionSelectAnswers";
import { fn } from "storybook/test";
import { LayoutQuestion } from "@/components/layout/LayoutQuestion/LayoutQuestion";

const layoutQuestionProps = {
  headerProps: {
    progressProps: {
      value: (5 / 15) * 100,
      label: "5 of 15",
      className: "max-w-[198px]",
    },
    onBack: fn(),
  },
  title: {
    children: "Which best represents your hair loss and goals?",
  },
  subtitle: {
    children: "Let's personalize your hair care journey",
  },
};

/** Reusable QuestionSelectAnswers page Component */
const meta: Meta<typeof QuestionSelectAnswers> = {
  title: "Templates/QuestionSelectAnswers",
  component: QuestionSelectAnswers,
  tags: ["autodocs"],
  parameters: {
    layout: "fullscreen",
  },
  args: {
    content: {
      answers: [
        {
          children: "Receding hairline, want to slow its progress",
          isCheckbox: true,
          id: "hairline",
        },
        {
          children: "Experiencing hair loss, exploring",
          isCheckbox: true,
          id: "exploring",
        },
        {
          children: "Experiencing hair loss, ready to start",
          isCheckbox: true,
          id: "ready-to-start",
        },
        {
          children: "Experiencing hair loss, ready to start",
          id: "ready-to-start-text",
        },
        {
          children: "Experiencing hair loss, ready to start",
          emoji: "👩🏼",
          id: "ready-to-start-emoji",
        },
        {
          children: "Experiencing hair loss, ready to start",
          emoji: "👩🏼",
          isCheckbox: true,
          id: "ready-to-start-emoji-checkbox",
        },
      ],
      activeAnswers: [
        {
          children: "Experiencing hair loss, ready to start",
          isCheckbox: true,
          id: "ready-to-start",
        },
        {
          children: "Experiencing hair loss, ready to start",
          emoji: "👩🏼",
          id: "ready-to-start-emoji",
        },
      ],
      onChangeSelectedAnswers: fn(),
      onAnswerClick: fn(),
    },
    bottomActionButtonProps: {
      actionButtonProps: {
        children: "Continue",
        onClick: fn(),
      },
    },
  },
  argTypes: {
    content: {
      control: { type: "object" },
    },
  },
  render: (args) => {
    return (
      <LayoutQuestion {...layoutQuestionProps}>
        <QuestionSelectAnswers {...args} />
      </LayoutQuestion>
    );
  },
};

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

export const Default = {} satisfies Story;
