import { Meta, StoryObj } from "@storybook/nextjs-vite";
import { QuestionRadioAnswers } from "./QuestionRadioAnswers";
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 QuestionRadioAnswers page Component */
const meta: Meta<typeof QuestionRadioAnswers> = {
  title: "Templates/QuestionRadioAnswers",
  component: QuestionRadioAnswers,
  tags: ["autodocs"],
  parameters: {
    layout: "fullscreen",
  },
  args: {
    content: {
      answers: [
        {
          children: "FEMALE",
          emoji: "👩",
          id: "female",
        },
        {
          children: "MALE",
          emoji: "👨",
          isCheckbox: true,
          id: "male",
        },
        {
          children: "Receding hairline, want to slow its progress",
          id: "without-emoji",
        },
      ],
      activeAnswer: {
        children: "MALE",
        emoji: "👨",
        isCheckbox: true,
        id: "male",
      },
      onAnswerClick: fn(),
      onChangeSelectedAnswer: fn(),
    },
  },
  argTypes: {
    content: {
      control: { type: "object" },
    },
  },
  render: (args) => (
    <LayoutQuestion {...layoutQuestionProps}>
      <QuestionRadioAnswers {...args} />
    </LayoutQuestion>
  ),
};

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

export const Default = {} satisfies Story;
