import type { Meta, StoryObj } from "@storybook/react";
import { Calendar } from "./calendar";

const meta: Meta<typeof Calendar> = {
	title: "Widgets/Calendar",
	component: Calendar,
	parameters: {
		layout: "padded",
	},
	tags: ["autodocs"],
	argTypes: {
		view: {
			control: "select",
			options: ["month", "week", "day"],
		},
		date: { control: "date" },
		events: { control: false },
		onViewChange: { action: "view changed" },
		onDateChange: { action: "date changed" },
		onEventClick: { action: "event clicked" },
		onSlotClick: { action: "slot clicked" },
	},
};

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

/**
 * Default calendar view showing the current month.
 * No events are displayed in this basic configuration.
 */
export const Default: Story = {
	args: {
		view: "month",
		date: new Date(),
		events: [],
	},
};

/**
 * Calendar with multiple events across different days.
 * Events are color-coded and can be clicked.
 */
export const WithEvents: Story = {
	args: {
		view: "month",
		date: new Date(2024, 0, 15), // January 15, 2024
		events: [
			{
				id: "1",
				title: "Team Meeting",
				start: new Date(2024, 0, 15, 10, 0),
				end: new Date(2024, 0, 15, 11, 0),
				color: "hsl(var(--primary))",
			},
			{
				id: "2",
				title: "Project Review",
				start: new Date(2024, 0, 18, 14, 0),
				end: new Date(2024, 0, 18, 15, 30),
				color: "hsl(221, 83%, 53%)",
				description: "Quarterly project review meeting",
			},
			{
				id: "3",
				title: "Client Presentation",
				start: new Date(2024, 0, 22, 9, 0),
				end: new Date(2024, 0, 22, 10, 30),
				color: "hsl(142, 71%, 45%)",
			},
			{
				id: "4",
				title: "Design Workshop",
				start: new Date(2024, 0, 25, 13, 0),
				end: new Date(2024, 0, 25, 16, 0),
				color: "hsl(24, 95%, 53%)",
			},
			{
				id: "5",
				title: "Sprint Planning",
				start: new Date(2024, 0, 29, 10, 0),
				end: new Date(2024, 0, 29, 12, 0),
				color: "hsl(262, 83%, 58%)",
			},
		],
	},
};

/**
 * Calendar in month view displaying a full month grid.
 * This is the default view for most calendar applications.
 */
export const MonthView: Story = {
	args: {
		view: "month",
		date: new Date(),
		events: [
			{
				id: "1",
				title: "All-day Event",
				start: new Date(),
				end: new Date(),
				allDay: true,
			},
		],
	},
};

/**
 * Calendar in week view showing hourly time slots.
 * Useful for detailed scheduling within a week.
 */
export const WeekView: Story = {
	args: {
		view: "week",
		date: new Date(),
		events: [
			{
				id: "1",
				title: "Morning Standup",
				start: new Date(new Date().setHours(9, 0)),
				end: new Date(new Date().setHours(9, 30)),
				color: "hsl(var(--primary))",
			},
			{
				id: "2",
				title: "Lunch Break",
				start: new Date(new Date().setHours(12, 0)),
				end: new Date(new Date().setHours(13, 0)),
				color: "hsl(24, 95%, 53%)",
			},
		],
	},
};

/**
 * Calendar in day view showing a single day with hourly slots.
 * Ideal for detailed daily scheduling.
 */
export const DayView: Story = {
	args: {
		view: "day",
		date: new Date(),
		events: [
			{
				id: "1",
				title: "Team Standup",
				start: new Date(new Date().setHours(9, 0)),
				end: new Date(new Date().setHours(9, 30)),
				color: "hsl(var(--primary))",
			},
			{
				id: "2",
				title: "Code Review",
				start: new Date(new Date().setHours(10, 0)),
				end: new Date(new Date().setHours(11, 0)),
				color: "hsl(221, 83%, 53%)",
			},
			{
				id: "3",
				title: "Lunch",
				start: new Date(new Date().setHours(12, 0)),
				end: new Date(new Date().setHours(13, 0)),
				color: "hsl(24, 95%, 53%)",
			},
			{
				id: "4",
				title: "Development Time",
				start: new Date(new Date().setHours(14, 0)),
				end: new Date(new Date().setHours(17, 0)),
				color: "hsl(142, 71%, 45%)",
			},
		],
	},
};

/**
 * Empty calendar with no events.
 * Shows the clean calendar interface without any scheduled items.
 */
export const EmptyCalendar: Story = {
	args: {
		view: "month",
		date: new Date(),
		events: [],
	},
};