"use client"

import * as z from "zod";
import { useForm } from "react-hook-form";
import { useState } from "react";
import { useParams, useRouter } from "next/navigation";

import axios from "axios";
import toast from "react-hot-toast";
import { Button } from "@/components/ui/button";
import { Heading } from "@/components/ui/heading";
import { zodResolver } from "@hookform/resolvers/zod";
import { variant } from "@prisma/client";
import { Separator } from "@radix-ui/react-separator";
import { Trash } from "lucide-react";
import { 
    Form, 
    FormControl, 
    FormDescription, 
    FormField, 
    FormItem, 
    FormLabel, 
    FormMessage
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { AlertModal } from "@/components/modal/alert-modal";
import { Checkbox } from "@/components/ui/checkbox";

const formSchema = z.object({
    name: z.string().min(1),
    isMen: z.boolean().default(false).optional(),
    isWoman: z.boolean().default(false).optional(),
})

type VariantFormValues = z.infer<typeof formSchema>

interface VariantFormProps {
    initialData: variant | null;
}

export const VariantForm: React.FC<VariantFormProps> = ({
    initialData,
}) => {
    const params = useParams();
    const router = useRouter();

    const [open, setOpen] = useState(false);
    const [loading, setLoading] = useState(false);

    const title = initialData ? "Edit variant" : "Create variant";
    const descirption = initialData ? "Edit a variant" : "Add a new variant";
    const toastMessage = initialData ? "Variant update" : "Variant created";
    const action = initialData ? "Save changes" : "Create"; 

    const form = useForm<VariantFormValues>({
        resolver: zodResolver(formSchema),
        defaultValues: initialData || {
            name: '',
        }
    });

    const onSubmit = async (data: VariantFormValues) => {
        try {
            setLoading(true)
            if (initialData) {
            await axios.patch(`/api/${params.storeId}/variant/${params.variantId}`, data)
        }   else {
            await axios.post(`/api/${params.storeId}/variant`, data)
        }
            router.refresh()
            router.push(`/${params.storeId}/variant`)
            toast.success(toastMessage)
        } catch (error) {
            toast.error("Something went wrong.")
        } finally {
            setLoading(false)
        }
    }

    const onDelete = async () => {
        try {
            setLoading(true)
            await axios.delete(`/api/${params.storeId}/variant/${params.variantId}`)
            router.refresh()
            router.push(`/${params.storeId}/variant`)
            toast.success("Variant deleted.")
        } catch (error) {
            toast.error("Make sure you removed all product using this variant first.")
        } finally {
            setLoading(false)
            setOpen(false)
        }
    }
    

    return (
        <>
            <AlertModal
                isOpen={open}
                onClose={() => setOpen(false)}
                onConfirm={onDelete}
                loading={loading}
            />
            <div className="flex items-center justify-between">
                <Heading
                    title={title}
                    description={descirption}
                />
                {initialData && (
                    <Button
                        disabled={loading}
                        variant={"destructive"}
                        size={"sm"}
                        onClick={() => setOpen(true)}
                    >
                        <Trash className="h-4 w-4"/>
                    </Button>
                )}
            </div>
            <Separator/>
                <Form {...form}>
                    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8 w-full">
                        <div className="grid grid-cols-3 gap-8">
                            <FormField
                                control={form.control}
                                name="name"
                                render={({field}) => (
                                    <FormItem>
                                        <FormLabel>Name</FormLabel>
                                        <FormControl>
                                            <Input disabled={loading} placeholder="Variant name" {...field}/>
                                        </FormControl>
                                        <FormMessage/>
                                    </FormItem>
                                )}
                            />
                            <FormField
                            control={form.control}
                            name="isMen"
                            render={({ field }) => (
                                <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
                                <FormControl>
                                    <Checkbox checked={field.value} onCheckedChange={field.onChange} />
                                </FormControl>
                                <div>
                                    <FormLabel>Men</FormLabel>
                                    <FormDescription>This variant will be included in the Men's page.</FormDescription>
                                </div>
                                </FormItem>
                            )}
                            />
                            <FormField
                            control={form.control}
                            name="isWoman"
                            render={({ field }) => (
                                <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
                                <FormControl>
                                    <Checkbox checked={field.value} onCheckedChange={field.onChange} />
                                </FormControl>
                                <div>
                                    <FormLabel>Woman</FormLabel>
                                    <FormDescription>This variant will be included in the Woman's page</FormDescription>
                                </div>
                                </FormItem>
                            )}
                            />
                        </div>
                        <Button disabled={loading} className="ml-auto"> 
                            {action}
                        </Button>
                    </form>
                </Form>
        </>
    )
}