"use client";

import * as React from "react";
import { CalendarIcon } from "lucide-react";
import { format } from "date-fns";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import {
	Form,
	FormControl,
	FormField,
	FormItem,
	FormLabel,
	FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import {
	Popover,
	PopoverContent,
	PopoverTrigger,
} from "@/components/ui/popover";
import { Checkbox } from "@/components/ui/checkbox";
import {
	Select,
	SelectContent,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from "@/components/ui/select";
import {
	SubmitErrorHandler,
	SubmitHandler,
	useForm,
	UseFormReturn,
} from "react-hook-form";
import { CalendarEventExternal } from "@schedule-x/calendar";
import ICalendarEvent from "@/interfaces/ICalendarEvent";
import { useEffect } from "react";

export const eventFormSchema = z.object({
	title: z.string().min(1, "Titre requis"),
	startDate: z.date({
		required_error: "Date de début requise",
	}),
	startTime: z.string(),
	endDate: z.date({
		required_error: "Date finale requise",
	}),
	endTime: z.string(),
	fullDay: z.boolean().default(false),
	frequency: z.enum(["unique", "quotidien", "hebdomadaire", "mensuel"]),
	frequencyEndDate: z.date().optional(),
	isVisible: z.boolean().default(true),
});

export type EventFormValues = z.infer<typeof eventFormSchema>;

const frequencies = [
	{ label: "Unique", value: "unique" },
	{ label: "Quotidien", value: "quotidien" },
	{ label: "Hebdomadaire", value: "hebdomadaire" },
	{ label: "Mensuel", value: "mensuel" },
];

const isCalendarEventExternal = (
	event: CalendarEventExternal | Omit<CalendarEventExternal, "id">,
): event is CalendarEventExternal => {
	return (event as CalendarEventExternal).id !== undefined;
};

export const EventForm: React.FC<{
	event: ICalendarEvent | Omit<ICalendarEvent, "id">;
	setForm: React.Dispatch<
		React.SetStateAction<UseFormReturn<EventFormValues> | undefined>
	>;
}> = ({ event, setForm }) => {
	const _start = new Date(event.start ?? Date.now());
	const _end = new Date(event.end ?? Date.now());
	const form = useForm<EventFormValues>({
		resolver: zodResolver(eventFormSchema),
		defaultValues: {
			title: event.title ? event.title : "",
			startDate: _start, // event.start),
			startTime: format(_start, "HH:mm"),
			endDate: _end, // event.end),
			endTime: format(_end, "HH:mm"),
			fullDay: event.fullday,
			frequency: "unique",
			isVisible: event.isVisible,
		},
	});

	useEffect(() => {
		setForm(form);
	}, []);

	const frequency = form.watch("frequency");

	return (
		<Form {...form}>
			<form className="w-full max-w-md space-y-4">
				<FormField
					control={form.control}
					name="title"
					render={({ field }) => (
						<FormItem>
							<FormLabel>Titre</FormLabel>
							<FormControl>
								<Input
									placeholder="Ajouter un titre"
									{...field}
								/>
							</FormControl>
							<FormMessage />
						</FormItem>
					)}
				/>

				<div className="grid grid-cols-[1fr,auto,1fr] items-end gap-2">
					<FormField
						control={form.control}
						name="startDate"
						render={({ field }) => (
							<FormItem className="flex flex-col">
								<FormLabel>Début</FormLabel>
								<Popover>
									<PopoverTrigger asChild>
										<FormControl>
											<Button
												variant="outline"
												className={cn(
													"w-full pl-3 text-left font-normal",
													!field.value &&
														"text-muted-foreground",
												)}
											>
												{field.value ? (
													format(
														field.value,
														"dd/MM/yyyy",
													)
												) : (
													<span>
														Choisis une date
													</span>
												)}
												<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
											</Button>
										</FormControl>
									</PopoverTrigger>
									<PopoverContent
										className="w-auto p-0"
										align="start"
									>
										<Calendar
											mode="single"
											selected={field.value}
											onSelect={field.onChange}
											initialFocus
										/>
									</PopoverContent>
								</Popover>
								<FormMessage />
							</FormItem>
						)}
					/>

					<FormField
						control={form.control}
						name="startTime"
						render={({ field }) => (
							<FormItem>
								<FormControl>
									<Input
										type="time"
										{...field}
										className="w-[120px]"
									/>
								</FormControl>
								<FormMessage />
							</FormItem>
						)}
					/>

					<span className="invisible">Until</span>

					<FormField
						control={form.control}
						name="endDate"
						render={({ field }) => (
							<FormItem className="flex flex-col">
								<FormLabel>Fin</FormLabel>
								<Popover>
									<PopoverTrigger asChild>
										<FormControl>
											<Button
												variant="outline"
												className={cn(
													"w-full pl-3 text-left font-normal",
													!field.value &&
														"text-muted-foreground",
												)}
											>
												{field.value ? (
													format(
														field.value,
														"dd/MM/yyyy",
													)
												) : (
													<span>
														Choisis une date
													</span>
												)}
												<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
											</Button>
										</FormControl>
									</PopoverTrigger>
									<PopoverContent
										className="w-auto p-0"
										align="start"
									>
										<Calendar
											mode="single"
											selected={field.value}
											onSelect={field.onChange}
											initialFocus
										/>
									</PopoverContent>
								</Popover>
								<FormMessage />
							</FormItem>
						)}
					/>

					<FormField
						control={form.control}
						name="endTime"
						render={({ field }) => (
							<FormItem>
								<FormControl>
									<Input
										type="time"
										{...field}
										className="w-[120px]"
									/>
								</FormControl>
								<FormMessage />
							</FormItem>
						)}
					/>
				</div>

				<FormField
					control={form.control}
					name="fullDay"
					render={({ field }) => (
						<FormItem className="flex flex-row items-start space-x-3 space-y-0">
							<FormControl>
								<Checkbox
									checked={field.value}
									onCheckedChange={field.onChange}
								/>
							</FormControl>
							<FormLabel>Journée complète</FormLabel>
							<FormMessage />
						</FormItem>
					)}
				/>

				<div className="flex gap-4 items-end">
					<FormField
						control={form.control}
						name="frequency"
						render={({ field }) => (
							<FormItem className="flex-1">
								<FormLabel>Fréquence</FormLabel>
								<Select
									onValueChange={field.onChange}
									defaultValue={field.value}
								>
									<FormControl>
										<SelectTrigger>
											<SelectValue placeholder="Selectionner Fréquence" />
										</SelectTrigger>
									</FormControl>
									<SelectContent>
										{frequencies.map((frequency) => (
											<SelectItem
												key={frequency.value}
												value={frequency.value}
											>
												{frequency.label}
											</SelectItem>
										))}
									</SelectContent>
								</Select>
								<FormMessage />
							</FormItem>
						)}
					/>

					{frequency !== "unique" && (
						<FormField
							control={form.control}
							name="frequencyEndDate"
							render={({ field }) => (
								<FormItem className="flex-1">
									<FormLabel>Jusqu'au</FormLabel>
									<Popover>
										<PopoverTrigger asChild>
											<FormControl>
												<Button
													variant="outline"
													className={cn(
														"w-full pl-3 text-left font-normal",
														!field.value &&
															"text-muted-foreground",
													)}
												>
													{field.value ? (
														format(
															field.value,
															"dd/MM/yyyy",
														)
													) : (
														<span>
															Choisis une date
														</span>
													)}
													<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
												</Button>
											</FormControl>
										</PopoverTrigger>
										<PopoverContent
											className="w-auto p-0"
											align="start"
										>
											<Calendar
												mode="single"
												selected={field.value}
												onSelect={field.onChange}
												initialFocus
											/>
										</PopoverContent>
									</Popover>
									<FormMessage />
								</FormItem>
							)}
						/>
					)}
				</div>

				<FormField
					control={form.control}
					name="isVisible"
					render={({ field }) => (
						<FormItem className="flex-1">
							<FormLabel className="align-sub">
								Evènement visible ?
							</FormLabel>
							<FormControl>
								<Checkbox
									className="m-3 align-top justify-center"
									checked={field.value}
									onCheckedChange={field.onChange}
								/>
							</FormControl>
							<FormMessage />
						</FormItem>
					)}
				/>
			</form>
		</Form>
	);
};