"use client"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"
import { DateTimePicker } from "@/components/ui/date-time-picker"
import { UserTypesAdd, UserTypesAddSchema } from "./schema"
import { useAddUserTypesMutation } from "./queries"
import { Checkbox } from "@/components/ui/checkbox"

const UserTypesForm = ({ refetchTable }: { refetchTable: () => void }) => {

    const form = useForm<UserTypesAdd>({
        resolver: zodResolver(UserTypesAddSchema),
        defaultValues: {
            type: "",
            token: "",
            typeToken: "",
            description: "",
            isProperty: false,
            expiryStarts: "",
            expiryEnds: "",
        }
    });

    const { handleSubmit } = form;

    const mutation = useAddUserTypesMutation();

    function onSubmit(values: UserTypesAdd) { mutation.mutate({ data: values }); setTimeout(() => refetchTable(), 400) };

    return (
        <Form {...form}>
            <form onSubmit={handleSubmit(onSubmit)} className="space-y-6 p-4" >
                {/* ROW 1 */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <FormField
                        control={form.control}
                        name="type"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Type</FormLabel>
                                <FormControl>
                                    <Input placeholder="Type" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />

                    <FormField
                        control={form.control}
                        name="token"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Token</FormLabel>
                                <FormControl>
                                    <Input placeholder="Token" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <FormField
                        control={form.control}
                        name="description"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Description</FormLabel>
                                <FormControl>
                                    <Input placeholder="Description" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <FormField
                        control={form.control}
                        name="typeToken"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Type Token</FormLabel>
                                <FormControl>
                                    <Input placeholder="Type Token" {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                </div>
                <Separator />
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <FormField
                        control={form.control}
                        name="expiryStarts"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Expiry Starts</FormLabel>
                                <FormControl>
                                    <DateTimePicker {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <FormField
                        control={form.control}
                        name="expiryEnds"
                        render={({ field }) => (
                            <FormItem>
                                <FormLabel>Expiry Ends</FormLabel>
                                <FormControl>
                                    <DateTimePicker {...field} />
                                </FormControl>
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                    <FormField
                        control={form.control}
                        name="isProperty"
                        render={({ field }) => (
                            <FormItem className="flex flex-row justify-center items-center space-x-3 space-y-0 mt-6">
                                <FormControl>
                                    <Checkbox checked={field.value} onCheckedChange={field.onChange} />
                                </FormControl>
                                <div className="leading-none">
                                    <FormLabel>
                                        Is Property?
                                    </FormLabel>
                                </div>
                            </FormItem>
                        )}
                    />
                </div>

                <Button type="submit" className="w-full">Add User Types</Button>
            </form>
        </Form>
    );

};

export { UserTypesForm }
