import { format } from "date-fns";
import { it } from "date-fns/locale";
import { ChevronDownIcon } from "lucide-react";
import { z } from "zod";
import { Confirm } from "~/components/confirm";
import {
	Form,
	FormControl,
	FormField,
	FormItem,
	FormLabel,
	FormMessage,
} from "~/components/custom_ui/form";
import { Button } from "~/components/ui/button";
import { Calendar } from "~/components/ui/calendar";
import Input from "~/components/ui/input";
import {
	Popover,
	PopoverContent,
	PopoverTrigger,
} from "~/components/ui/popover";
import { Textarea } from "~/components/ui/textarea";
import { useZodForm } from "~/lib/zodForm";
import { useTranslation } from "~/providers/I18nProvider";
import type { EventQueue, EventQueueUpdate } from "~/schemas/public/EventQueue";

const Schema = z.object({
	lock_date: z.date(),
	lock_time: z.string(),
	data: z.string(),
});

type FormValues = z.infer<typeof Schema>;
export const FormEditQueueMail = ({
	data,
	submitMutation,
	del,
}: {
	data: EventQueue;
	submitMutation: (fields: EventQueueUpdate) => void;
	del: () => void;
}) => {
	const { locale, t } = useTranslation();

	z.config(z.locales[locale]());

	const form = useZodForm(Schema, {
		defaultValues: {
			lock_date: new Date(data.lock_expires),
			lock_time: format(new Date(data.lock_expires), "HH:mm:ss"),
			data: JSON.stringify(data.data, null, 2),
		},
	});

	function onSubmit(fields: FormValues) {
		submitMutation({
			data: fields.data,
			lock_expires: new Date(
				format(fields.lock_date, "yyyy-MM-dd", { locale: it }) +
					"T" +
					fields.lock_time,
			),
		});
	}

	return (
		<Form {...form}>
			<form className="space-y-8 px-0.5" onSubmit={form.handleSubmit(onSubmit)}>
				<div className="grid w-full grid-cols-2 items-center gap-4">
					<FormField
						control={form.control}
						name="lock_date"
						render={({ field }) => (
							<FormItem>
								<div className="flex flex-wrap items-center gap-x-2">
									<FormLabel htmlFor="titolo">Data Invio</FormLabel>
									<FormMessage />
								</div>
								<FormControl>
									<Popover>
										<PopoverTrigger asChild>
											<Button
												className="w-full justify-between bg-card font-normal"
												id="date-picker-optional"
												variant="outline"
											>
												{field.value
													? format(field.value, "PPP", { locale: it })
													: "Seleziona data"}
												<ChevronDownIcon />
											</Button>
										</PopoverTrigger>
										<PopoverContent
											align="start"
											className="w-auto overflow-hidden p-0"
										>
											<Calendar
												captionLayout="dropdown"
												defaultMonth={field.value}
												mode="single"
												onSelect={(date) => {
													field.onChange(date);
												}}
												selected={field.value}
											/>
										</PopoverContent>
									</Popover>
								</FormControl>
							</FormItem>
						)}
					/>
					<FormField
						control={form.control}
						name="lock_time"
						render={({ field }) => (
							<FormItem>
								<div className="flex flex-wrap items-center gap-x-2">
									<FormLabel htmlFor="titolo">Ora Invio</FormLabel>
									<FormMessage />
								</div>
								<FormControl>
									<Input
										className="appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
										defaultValue={field.value}
										id="time-picker-optional"
										onChange={(e) => field.onChange(e.target.value)}
										step="1"
										type="time"
									/>
								</FormControl>
							</FormItem>
						)}
					/>
				</div>
				<FormField
					control={form.control}
					name="data"
					render={({ field }) => (
						<FormItem>
							<div className="flex flex-wrap items-center gap-x-2">
								<FormLabel htmlFor="data">{t.contact_form.messaggio}</FormLabel>
								<FormMessage />
							</div>
							<FormControl>
								<Textarea className="min-h-50" {...field} />
							</FormControl>
						</FormItem>
					)}
				/>
				<div className="flex w-full justify-end gap-2">
					<Button type="submit">Salva</Button>
					<Confirm
						description="Sei sicuro di voler svuotare la coda email?"
						onConfirm={del}
						title="Elimina"
					>
						<Button aria-label="Delete" variant="destructive">
							Rimuovi dalla coda
						</Button>
					</Confirm>
				</div>
			</form>
		</Form>
	);
};
