import type { Meta, StoryObj } from "@storybook/react";
import { addDays } from "date-fns";
import { DatePickerField } from "./DatePickerField";

const meta: Meta<typeof DatePickerField> = {
	title: "Widgets/Onboarding/Fields/DatePickerField",
	component: DatePickerField,
	parameters: {
		layout: "centered",
	},
	tags: ["autodocs"],
	argTypes: {
		value: { control: "date" },
		onChange: { action: "changed" },
		disabled: { control: "boolean" },
		required: { control: "boolean" },
	},
};

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

const today = new Date();

export const Default: Story = {
	args: {
		id: "start-date",
		label: "Start Date",
		placeholder: "Pick a date",
		value: undefined,
	},
};

export const WithValue: Story = {
	args: {
		id: "start-date",
		label: "Start Date",
		placeholder: "Pick a date",
		value: today,
	},
};

export const WithDescription: Story = {
	args: {
		id: "start-date",
		label: "Start Date",
		description: "When would you like to start?",
		placeholder: "Pick a date",
		value: undefined,
	},
};

export const Required: Story = {
	args: {
		id: "start-date",
		label: "Start Date",
		placeholder: "Pick a date",
		required: true,
		value: undefined,
	},
};

export const WithMinDate: Story = {
	args: {
		id: "future-date",
		label: "Future Date",
		description: "Only future dates allowed",
		placeholder: "Pick a date",
		minDate: today,
		value: undefined,
	},
};

export const WithMaxDate: Story = {
	args: {
		id: "past-date",
		label: "Past Date",
		description: "Only past dates allowed",
		placeholder: "Pick a date",
		maxDate: today,
		value: undefined,
	},
};

export const WithDateRange: Story = {
	args: {
		id: "date-range",
		label: "Date in Range",
		description: "Only dates within the next 30 days",
		placeholder: "Pick a date",
		minDate: today,
		maxDate: addDays(today, 30),
		value: undefined,
	},
};

export const WithDisabledDates: Story = {
	args: {
		id: "available-date",
		label: "Available Date",
		description: "Some dates are unavailable",
		placeholder: "Pick a date",
		disabledDates: [addDays(today, 1), addDays(today, 3), addDays(today, 5)],
		value: undefined,
	},
};

export const WithError: Story = {
	args: {
		id: "start-date",
		label: "Start Date",
		placeholder: "Pick a date",
		value: undefined,
		error: "Please select a start date",
		touched: true,
	},
};

export const Disabled: Story = {
	args: {
		id: "start-date",
		label: "Start Date",
		placeholder: "Pick a date",
		value: today,
		disabled: true,
	},
};