import { Meta, StoryObj } from "@storybook/nextjs-vite";
import { fn } from "storybook/test";
import { useState } from "react";
import DateInput from "./DateInput";
import Typography from "@/components/ui/Typography/Typography";

/** Reusable DateInput Component */
const meta: Meta<typeof DateInput> = {
  title: "Widgets/DateInput",
  component: DateInput,
  tags: ["autodocs"],
  args: {
    value: null,
    onChange: fn(),
    // onBlur: fn(),
  },
  argTypes: {
    value: {
      control: { type: "text" },
      description: "Значение даты в формате YYYY-MM-DD",
    },
    maxYear: {
      control: { type: "number" },
      description: "Максимальный год для выбора",
    },
    yearsRange: {
      control: { type: "number" },
      description: "Диапазон лет для выбора",
    },
    error: {
      control: { type: "text" },
      description: "Сообщение об ошибке",
    },
  },
  render: (args) => {
    const [value, setValue] = useState<string | null>(args.value);

    return (
      <div className="flex flex-col gap-4">
        <Typography>Выбранная дата: {value || "Не выбрана"}</Typography>
        <DateInput
          {...args}
          //   value={args.value}
          onChange={(newValue) => {
            setValue(newValue);
            args.onChange?.(newValue);
          }}
        />
      </div>
    );
  },
};

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

export const Default = {} satisfies Story;

export const WithValue = {
  args: {
    value: "1990-05-15",
  },
} satisfies Story;

export const WithError = {
  args: {
    value: "2025-01-01",
    error: "Дата рождения не может быть в будущем",
  },
} satisfies Story;

export const WithEmptyValue = {
  args: {
    value: null,
  },
} satisfies Story;

export const CustomYearRange = {
  args: {
    value: null,
    maxYear: 2000,
    yearsRange: 50,
  },
} satisfies Story;

export const WithCustomPlaceholders = {
  args: {
    value: null,
    daySelectProps: {
      placeholder: "День",
    },
    monthSelectProps: {
      placeholder: "Месяц",
    },
    yearSelectProps: {
      placeholder: "Год",
    },
  },
} satisfies Story;

export const Disabled = {
  args: {
    value: "1990-05-15",
    daySelectProps: {
      disabled: true,
    },
    monthSelectProps: {
      disabled: true,
    },
    yearSelectProps: {
      disabled: true,
    },
  },
} satisfies Story;
