PrintAuftrag-Portfolio/frontend/app/dashboard/vorlagenRollendruck/components/alterDialog.tsx

"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 { alterVorlage } from "./action";

import { useState } from "react";

type TableData = {
    id: number;
    printer: string;
    height: number;
    width: number;
    articleTypes: string;
};

type AlterDialogProps = {
    onNewEntry: () => void;
    data: TableData;
};

export default function AlterDialog({ onNewEntry, data }: AlterDialogProps) {
    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: data.printer,
            Höhe: data.height,
            Breite: data.width,
            ArtikelTypen: data.articleTypes,
        },
    });



    async function onSubmit(values: z.infer<typeof formSchema>) {
        const formData = new FormData();
        formData.append("id", data.id.toString());
        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 alterVorlage(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="ghost" className="font-normal pl-2">
                        Vorlage bearbeiten
                    </Button>
                </DialogTrigger>
                <DialogContent className="max-w-screen-lg max-h-screen overflow-y-auto">
                    <DialogHeader>
                        <DialogTitle className="mb-8">Vorlage bearbeiten</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 eine durch Kommas getrennte Liste von Artikeltypen ein (z.B. te, bs, s, s, s).
                                            </FormDescription>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />
                                <Button type="submit">
                                    Änderungen speichern
                                </Button>
                            </form>
                        </Form>
                    </DialogHeader>
                </DialogContent>
            </Dialog>
        </div>
    );
}