"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 { useForm } from "react-hook-form"
import {
	CalendarEventExternal,
} from "@schedule-x/calendar";
import ICalendarEvent from "@/interfaces/ICalendarEvent"

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">;
		onSubmitEvent: (eventFormValues: EventFormValues) => void;
	}
> = ({
	event,
	onSubmitEvent,
}) => {
		
		const form =  useForm<EventFormValues>({
			resolver: zodResolver(eventFormSchema),
			defaultValues: {
				title:		isCalendarEventExternal(event) ? event.title : "",
				startDate:	isCalendarEventExternal(event) ? new Date(event.start) : new Date(),
				startTime:	isCalendarEventExternal(event) ? `${new Date(event.start).getHours()}:${new Date(event.start).getMinutes()}` : "10:00",
				endDate:	isCalendarEventExternal(event) ? new Date(event.end) : new Date(),
				endTime:	isCalendarEventExternal(event) ? `${new Date(event.end).getHours()}:${new Date(event.end).getMinutes()}` : "11:00",
				fullDay:	isCalendarEventExternal(event) ? event.fullday : false,
				frequency:	isCalendarEventExternal(event) ? event.rrule : "unique",
				isVisible: isCalendarEventExternal(event) ? event.visibility : true,
			},
		}) 	

		const frequency = form.watch("frequency")

		async function onSubmit(data: EventFormValues) {
			try {
				const validatedData = eventFormSchema.parse(data)
				onSubmitEvent(validatedData)
			} catch (error) {
				console.error("On submit error : ", error)
			}
		}

		return (
			<Form {...form}>
				<form onSubmit={form.handleSubmit(onSubmit)} 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, "MM/dd/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, "MM/dd/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>
						)}
					/>
					<div className="flex justify-end space-x-2">
						<Button variant="outline" type="button">
							Abandonner
						</Button>
						<Button type="submit" className="bg-[#6B4EFF] hover:bg-[#5B3FEF]">
							Sauvegarder
						</Button>
					</div>
				</form>
			</Form>
		)
	}