lifetracker/apps/web/components/dashboard/categories/EditMetricDialog.tsx

import { useEffect, useState } from "react";
import { ActionButton } from "@/components/ui/action-button";
import { Button } from "@/components/ui/button";
import {
    Dialog,
    DialogClose,
    DialogContent,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog";
import {
    Form,
    FormControl,
    FormField,
    FormItem,
    FormLabel,
    FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select";
import { toast } from "@/components/ui/use-toast";
import { api } from "@/lib/trpc";
import { zodResolver } from "@hookform/resolvers/zod";
import { TRPCClientError } from "@trpc/client";
import { useForm } from "react-hook-form";
import { z } from "zod";

import { zUpdateCategoryRequestSchema, ZUpdateCategoryRequest } from "@lifetracker/shared/types/categories";

export default function EditMetricDialog({
    category: initialCategory,
    children,
}: {
    category: ZUpdateCategoryRequest;
    children?: React.ReactNode;
}) {
    const apiUtils = api.useUtils();
    const [isOpen, onOpenChange] = useState(false);

    const form = useForm<ZUpdateCategoryRequest>({
        resolver: zodResolver(zUpdateCategoryRequestSchema),
        defaultValues: initialCategory,
    });
    const { mutate, isPending } = api.categories.update.useMutation({
        onSuccess: () => {
            apiUtils.categories.list.invalidate();
            toast({
                description: "Category updated successfully",
            });
            onOpenChange(false);
        },
        onError: (error) => {
            if (error instanceof TRPCClientError) {
                toast({
                    variant: "destructive",
                    description: error.message,
                });
            } else {
                toast({
                    variant: "destructive",
                    description: "Failed to update category",
                });
            }
        },
    });

    useEffect(() => {
        if (!isOpen) {
            form.reset();
        }
    }, [isOpen, form]);

    return (
        <Dialog open={isOpen} onOpenChange={onOpenChange}>
            <DialogTrigger asChild>{children}</DialogTrigger>
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>Edit Category</DialogTitle>
                </DialogHeader>
                <Form {...form}>
                    <form onSubmit={form.handleSubmit((val) => mutate(val))}>
                        <div className="flex w-full flex-col space-y-2">
                            <FormField
                                control={form.control}
                                name="name"
                                render={({ field }) => (
                                    <FormItem>
                                        <FormLabel>Name</FormLabel>
                                        <FormControl>
                                            <Input
                                                type="text"
                                                placeholder="Name"
                                                {...field}
                                                className="w-full rounded border p-2"
                                            />
                                        </FormControl>
                                        <FormMessage />
                                    </FormItem>
                                )}
                            />
                            <FormField
                                control={form.control}
                                name="code"
                                render={({ field }) => (
                                    <FormItem>
                                        <FormLabel>Code</FormLabel>
                                        <FormControl>
                                            <Input
                                                type="number"
                                                placeholder="Code"
                                                {...field}
                                                className="w-full rounded border p-2"
                                            />
                                        </FormControl>
                                        <FormMessage />
                                    </FormItem>
                                )}
                            />
                            <FormField
                                control={form.control}
                                name="description"
                                render={({ field }) => (
                                    <FormItem>
                                        <FormLabel>Description</FormLabel>
                                        <FormControl>
                                            <Input
                                                type="text"
                                                placeholder="Description"
                                                {...field}
                                                className="w-full rounded border p-2"
                                            />
                                        </FormControl>
                                        <FormMessage />
                                    </FormItem>
                                )}
                            />
                            {/* <FormField
                control={form.control}
                name="colorId"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Color</FormLabel>
                    <FormControl>
                      <Input
                        type="text"
                        placeholder="Color"
                        {...field}
                        className="w-full rounded border p-2"
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              /> */}
                            <DialogFooter className="sm:justify-end">
                                <DialogClose asChild>
                                    <Button type="button" variant="secondary">
                                        Close
                                    </Button>
                                </DialogClose>
                                <ActionButton
                                    type="submit"
                                    loading={isPending}
                                    disabled={isPending}
                                >
                                    Update
                                </ActionButton>
                            </DialogFooter>
                        </div>
                    </form>
                </Form>
            </DialogContent>
        </Dialog>
    );
}