"use Client";
import { Button } from "@/components/ui/button";
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog";
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { z } from "zod"
import {
    Form,
    FormControl,
    FormDescription,
    FormField,
    FormItem,
    FormLabel,
    FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"


import { createVorlage } from "./action";

import { useState } from "react";

export default function AddDialog({ onNewEntry }: { onNewEntry: () => void }) {
    const [open, setOpen] = useState(false)
    const formSchema = z.object({
        Drucker: z.string().min(1, {
            message: "Druckername muss mindestens 2 Zeichen lang sein.",
        }),
        Höhe: z.preprocess(
            (value) => (typeof value === "string" ? parseFloat(value) : value),
            z.number({
                invalid_type_error: "Höhe muss eine gültige Zahl sein. Bspw. 1.5 .",
            }).min(1, {
                message: "Höhe muss mindestens 1 sein.",
            })
        ),
        Breite: z.preprocess(
            (value) => (typeof value === "string" ? parseFloat(value) : value),
            z.number({
                invalid_type_error: "Breite muss eine gültige Zahl sein. Bspw. 1.5 .",
            }).min(1, {
                message: "Breite muss mindestens 1 sein.",
            })
        ),
        ArtikelTypen: z
            .string()
            .regex(/^(\s*\w+\s*)(,\s*\w+\s*)*$/, {
                message: "Bitte geben Sie eine durch Kommas getrennte Liste ein (z.B. te, bs, s, s, s)",
            }),
    });

    const form = useForm<z.infer<typeof formSchema>>({
        resolver: zodResolver(formSchema),
        defaultValues: {
            Drucker: "",
            Höhe: 0,
            Breite: 0,
            ArtikelTypen: "",
        },
    });


    async function onSubmit(values: z.infer<typeof formSchema>) {
        const formData = new FormData();

        formData.append("printer", values.Drucker);
        formData.append("height", values.Höhe.toString());
        formData.append("width", values.Breite.toString());
        formData.append("articleTypes", values.ArtikelTypen);
        try {
            await createVorlage(formData);
            setOpen(false);
            form.reset();
            onNewEntry();
        }
        catch (error) {
            console.error("Error submitting form:", error);
            throw new Error("An error occurred while submitting the form.");
        }

    }
    return (
        <div>
            <Dialog open={open} onOpenChange={setOpen}>
                <DialogTrigger asChild>
                    <Button variant="outline" className="mt-2 mb-2 border-green-700 text-green-700">
                        Vorlage hinzufügen
                    </Button>
                </DialogTrigger>
                <DialogContent className="max-w-screen-lg max-h-screen overflow-y-auto">
                    <DialogHeader>
                        <DialogTitle className="mb-8">Vorlage hinzufügen</DialogTitle>
                        <Form {...form}>
                            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
                                <FormField
                                    control={form.control}
                                    name="Drucker"
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>Drucker Name</FormLabel>
                                            <FormControl>
                                                <Input {...field} />
                                            </FormControl>
                                            <DialogDescription>
                                                Der Name des Druckers, auf dem die Vorlage gedruckt wird.
                                            </DialogDescription>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />
                                <FormField
                                    control={form.control}
                                    name="Höhe"
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>Höhe</FormLabel>
                                            <FormControl>
                                                <Input type="number" step="any" {...field} />
                                            </FormControl>
                                            <FormDescription>
                                                Die Höhe der Vorlage in Millimeter.
                                            </FormDescription>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />
                                <FormField
                                    control={form.control}
                                    name="Breite"
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>Breite</FormLabel>
                                            <FormControl>
                                                <Input type="number" step="any" {...field} />
                                            </FormControl>
                                            <FormDescription>

                                                Die Breite der Vorlage in Millimeter.
                                            </FormDescription>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />
                                <FormField
                                    control={form.control}
                                    name="ArtikelTypen"
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>Artikel Typen</FormLabel>
                                            <FormControl>
                                                <Input {...field} />
                                            </FormControl>
                                            <FormDescription>
                                                Geben Sie die Artikeltypen als durch Kommas getrennte Liste ein (z.B. te, bs, s, s, s).
                                            </FormDescription>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />
                                <Button type="submit">
                                    Hinzufügen
                                </Button>
                            </form>
                        </Form>
                    </DialogHeader>
                </DialogContent>
            </Dialog>
        </div>
    );
}