"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,
    FormField,
    FormItem,
    FormLabel,
    FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"


import {addDupliArtikel} from "./action";

import { useState } from "react";
import {Plus} from "lucide-react";

export default function AddDialog({ onNewEntry }: { onNewEntry: () => void }) {
    const [open, setOpen] = useState(false)
    const formSchema = z.object({
        ArtikelTyp: z.string().min(1, {
            message: "Druckername muss mindestens 2 Zeichen lang sein.",
        }),
    });

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


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

        formData.append("ArtikelTyp", values.ArtikelTyp);
        try {
            await addDupliArtikel(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="border-green-700 text-green-700 mt-2 mb-2" ><Plus /></Button>
                </DialogTrigger>
                <DialogContent className="max-w-screen-lg max-h-screen overflow-y-auto">
                    <DialogHeader>
                        <DialogTitle className="mb-8">ArtikelTyp hinzufügen</DialogTitle>
                        <Form {...form}>
                            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
                                <FormField
                                    control={form.control}
                                    name="ArtikelTyp"
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>ArtikelTyp</FormLabel>
                                            <FormControl>
                                                <Input {...field} />
                                            </FormControl>
                                            <DialogDescription>
                                                Der Typ des Artikels, der dupliziert gedruckt werden soll.
                                            </DialogDescription>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />
                                <Button type="submit">
                                    Hinzufügen
                                </Button>
                            </form>
                        </Form>
                    </DialogHeader>
                </DialogContent>
            </Dialog>
        </div>
    );
}