import { Meta, StoryObj } from "@storybook/nextjs-vite";
import { QuestionDateAnswers } from "./QuestionDateAnswers";
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: "When is your birthday?",
  },
  subtitle: {
    children: "We need this information to personalize your experience",
  },
};

/** Reusable QuestionDateAnswers page Component */
const meta: Meta<typeof QuestionDateAnswers> = {
  title: "Templates/QuestionDateAnswers",
  component: QuestionDateAnswers,
  tags: ["autodocs"],
  parameters: {
    layout: "fullscreen",
  },
  args: {
    content: {
      value: null,
      onChange: fn(),
      maxYear: new Date().getFullYear() - 11,
      yearsRange: 100,
    },
    bottomActionButtonProps: {
      actionButtonProps: {
        children: "Continue",
        onClick: fn(),
      },
    },
  },
  argTypes: {
    content: {
      control: { type: "object" },
    },
    bottomActionButtonProps: {
      control: { type: "object" },
    },
  },
  render: (args) => {
    return (
      <LayoutQuestion {...layoutQuestionProps}>
        <QuestionDateAnswers {...args} />
      </LayoutQuestion>
    );
  },
};

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

export const Default = {} satisfies Story;

export const WithInitialValue = {
  args: {
    content: {
      value: "1990-05-15",
      onChange: fn(),
      maxYear: new Date().getFullYear() - 11,
      yearsRange: 100,
    },
  },
} satisfies Story;

export const WithError = {
  args: {
    content: {
      value: "",
      onChange: fn(),
      maxYear: new Date().getFullYear() - 11,
      yearsRange: 100,
    },
  },
} satisfies Story;

export const WithCustomLocale = {
  args: {
    content: {
      value: null,
      onChange: fn(),
      maxYear: new Date().getFullYear() - 11,
      yearsRange: 100,
    },
  },
} satisfies Story;

export const WithCustomYearRange = {
  args: {
    content: {
      value: null,
      onChange: fn(),
      maxYear: 2000,
      yearsRange: 50,
    },
  },
} satisfies Story;

export const WithoutBottomButton = {
  args: {
    content: {
      value: null,
      onChange: fn(),
      maxYear: new Date().getFullYear() - 11,
      yearsRange: 100,
    },
    bottomActionButtonProps: undefined,
  },
} satisfies Story;
