"use client";
import { Button } from "@/components/ui/button";
import { DialogClose } from "@/components/ui/dialog";
import {
	Form,
	FormControl,
	FormDescription,
	FormField,
	FormItem,
	FormLabel,
	FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { useToast } from "@/components/ui/use-toast";
import { createPrintJob } from "@/server/actions/printJobs";
import { zodResolver } from "@hookform/resolvers/zod";
import { CalendarPlusIcon, XCircleIcon } from "lucide-react";
import { useRouter } from "next/navigation";
import { useForm } from "react-hook-form";
import { If, Then } from "react-if";
import { z } from "zod";

export const formSchema = z.object({
	hours: z.coerce.number().int().min(0).max(96, {
		message: "Die Stunden müssen zwischen 0 und 96 liegen.",
	}),
	minutes: z.coerce.number().int().min(0).max(59, {
		message: "Die Minuten müssen zwischen 0 und 59 liegen.",
	}),
	comments: z.string().optional(),
});

interface PrinterReserveFormProps {
	userId: string;
	printerId: string;
	isDialog?: boolean;
}

export function PrinterReserveForm(props: PrinterReserveFormProps) {
	const { userId, printerId, isDialog } = props;
	const router = useRouter();
	const { toast } = useToast();

	const form = useForm<z.infer<typeof formSchema>>({
		resolver: zodResolver(formSchema),
		defaultValues: {
			hours: 0,
			minutes: 0,
			comments: "",
		},
	});

	async function onSubmit(values: z.infer<typeof formSchema>) {
		if (values.hours === 0 && values.minutes === 0) {
			form.setError("hours", {
				message: "",
			});
			form.setError("minutes", {
				message:
					"Die Dauer des Druckauftrags muss mindestens 1 Minute betragen.",
			});
			return;
		}

		try {
			const jobId = await createPrintJob({
				durationInMinutes: values.hours * 60 + values.minutes,
				comments: values.comments,
				userId: userId,
				printerId: printerId,
			});

			router.push(`/job/${jobId}`);
		} catch (error) {
			if (error instanceof Error) {
				toast({ variant: "destructive", description: error.message });
			} else {
				toast({
					variant: "destructive",
					description: "Ein unbekannter Fehler ist aufgetreten.",
				});
			}
			return;
		}

		toast({ description: "Druckauftrag wurde erfolgreich erstellt." });
	}

	return (
		<Form {...form}>
			<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
				<div className="flex flex-row gap-2">
					<FormField
						control={form.control}
						name="hours"
						render={({ field }) => (
							<FormItem className="w-1/2">
								<FormLabel>Stunden</FormLabel>
								<FormControl>
									<Input placeholder="0" {...field} />
								</FormControl>
								<FormMessage />
							</FormItem>
						)}
					/>
					<FormField
						control={form.control}
						name="minutes"
						render={({ field }) => (
							<FormItem className="w-1/2">
								<FormLabel>Minuten</FormLabel>
								<FormControl>
									<Input placeholder="0" {...field} />
								</FormControl>
								<FormMessage />
							</FormItem>
						)}
					/>
				</div>
				<FormField
					control={form.control}
					name="comments"
					render={({ field }) => (
						<FormItem>
							<FormLabel>Anmerkungen</FormLabel>
							<FormControl>
								<Textarea placeholder="" {...field} />
							</FormControl>
							<FormDescription>
								In dieses Feld kannst du Anmerkungen zu deinem Druckauftrag
								hinzufügen. Sie können beispielsweise Informationen über das
								Druckmaterial, die Druckqualität oder die Farbe enthalten.
							</FormDescription>
							<FormMessage />
						</FormItem>
					)}
				/>
				<div className="flex justify-between items-center">
					<If condition={isDialog}>
						<Then>
							<DialogClose asChild>
								<Button
									variant={"secondary"}
									className="gap-2 flex items-center"
								>
									<XCircleIcon className="w-4 h-4" />
									<span>Abbrechen</span>
								</Button>
							</DialogClose>
						</Then>
					</If>
					<Button type="submit" className="gap-2 flex items-center">
						<CalendarPlusIcon className="w-4 h-4" />
						<span>Reservieren</span>
					</Button>
				</div>
			</form>
		</Form>
	);
}
