"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 { BuildAdd, buildAddSchema } from "./schema"
import { useAddBuildMutation } from "./queries"
import { Checkbox } from "@/components/ui/checkbox"
import { PageBuildSelectionBuildTypes } from "../selections/build-types/page"
import { useState, useEffect } from "react"

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

    const form = useForm<BuildAdd>({
        resolver: zodResolver(buildAddSchema),
        defaultValues: {
            buildType: "",
            info: {
                govAddressCode: "",
                buildName: "",
                buildNo: "",
                maxFloor: 0,
                undergroundFloor: 0,
                buildDate: "",
                decisionPeriodDate: "",
                taxNo: "",
                liftCount: 0,
                heatingSystem: false,
                coolingSystem: false,
                hotWaterSystem: false,
                blockServiceManCount: 0,
                securityServiceManCount: 0,
                garageCount: 0,
                managementRoomId: "",
            }
        },
    });
    const [buildTypesID, setBuildTypesID] = useState('');
    useEffect(() => { form.setValue("buildType", buildTypesID) }, [buildTypesID]);
    const { handleSubmit } = form;
    const mutation = useAddBuildMutation();
    function onSubmit(values: BuildAdd) { mutation.mutate({ data: values }); setTimeout(() => refetchTable(), 400) };

    return (
        <div>
            <PageBuildSelectionBuildTypes buildTypesID={buildTypesID} setBuildTypesID={setBuildTypesID} />
            <Form {...form}>
                <form onSubmit={handleSubmit(onSubmit)} className="space-y-6 p-4" >
                    {/* ROW 1 */}

                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <FormField
                            control={form.control}
                            name="info.govAddressCode"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>Gov Address Code</FormLabel>
                                    <FormControl>
                                        <Input placeholder="Gov Address Code" {...field} />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                        <FormField
                            control={form.control}
                            name="info.buildName"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>Build Name</FormLabel>
                                    <FormControl>
                                        <Input placeholder="Build Name" {...field} />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                        <FormField
                            control={form.control}
                            name="info.buildNo"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>Build No</FormLabel>
                                    <FormControl>
                                        <Input placeholder="Build No" {...field} />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <FormField
                            control={form.control}
                            name="info.maxFloor"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>Max Floor</FormLabel>
                                    <FormControl>
                                        <Input
                                            type="number"
                                            placeholder="Max Floor"
                                            {...field}
                                            onBlur={(e) => { field.onBlur(); const numValue = parseFloat(e.target.value); if (!isNaN(numValue)) { field.onChange(numValue) } }}
                                        />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                        <FormField
                            control={form.control}
                            name="info.undergroundFloor"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>Underground Floor</FormLabel>
                                    <FormControl>
                                        <Input
                                            type="number"
                                            placeholder="Underground Floor"
                                            {...field}
                                            onBlur={(e) => { field.onBlur(); const numValue = parseFloat(e.target.value); if (!isNaN(numValue)) { field.onChange(numValue) } }}
                                        />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <FormField
                            control={form.control}
                            name="info.taxNo"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>Tax No</FormLabel>
                                    <FormControl>
                                        <Input placeholder="Tax No" {...field} />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                        <FormField
                            control={form.control}
                            name="info.liftCount"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>Lift Count</FormLabel>
                                    <FormControl>
                                        <Input
                                            type="number"
                                            placeholder="Lift Count"
                                            {...field}
                                            onBlur={(e) => {
                                                field.onBlur();
                                                const numValue = parseFloat(e.target.value);
                                                if (!isNaN(numValue)) {
                                                    field.onChange(numValue);
                                                }
                                            }}
                                        />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                    </div>

                    <div className="flex flex-row justify-evenly">
                        <FormField
                            control={form.control}
                            name="info.heatingSystem"
                            render={({ field }) => (
                                <FormItem className="flex flex-row items-center space-x-3 space-y-0">
                                    <FormControl>
                                        <Checkbox checked={field.value} onCheckedChange={field.onChange} />
                                    </FormControl>
                                    <div className="leading-none">
                                        <FormLabel>
                                            Heating System
                                        </FormLabel>
                                    </div>
                                </FormItem>
                            )}
                        />
                        <FormField
                            control={form.control}
                            name="info.coolingSystem"
                            render={({ field }) => (
                                <FormItem className="flex flex-row items-center space-x-3 space-y-0">
                                    <FormControl>
                                        <Checkbox checked={field.value} onCheckedChange={field.onChange} />
                                    </FormControl>
                                    <div className="leading-none">
                                        <FormLabel>
                                            Cooling System
                                        </FormLabel>
                                    </div>
                                </FormItem>
                            )}
                        />
                        <FormField
                            control={form.control}
                            name="info.hotWaterSystem"
                            render={({ field }) => (
                                <FormItem className="flex flex-row items-center space-x-3 space-y-0">
                                    <FormControl>
                                        <Checkbox checked={field.value} onCheckedChange={field.onChange} />
                                    </FormControl>
                                    <div className="leading-none">
                                        <FormLabel>
                                            Hot Water System
                                        </FormLabel>
                                    </div>
                                </FormItem>
                            )}
                        />
                    </div>

                    <Separator />
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <FormField
                            control={form.control}
                            name="info.buildDate"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>Build Date</FormLabel>
                                    <FormControl>
                                        <DateTimePicker {...field} />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                        <FormField
                            control={form.control}
                            name="info.decisionPeriodDate"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>Decision Period Date</FormLabel>
                                    <FormControl>
                                        <DateTimePicker {...field} />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                        <FormField
                            control={form.control}
                            name="info.blockServiceManCount"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>Block Service Man Count</FormLabel>
                                    <FormControl>
                                        <Input
                                            type="number"
                                            placeholder="Block Service Man Count"
                                            {...field}
                                            onBlur={(e) => {
                                                field.onBlur();
                                                const numValue = parseFloat(e.target.value);
                                                if (!isNaN(numValue)) {
                                                    field.onChange(numValue);
                                                }
                                            }}
                                        />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                        <FormField
                            control={form.control}
                            name="info.securityServiceManCount"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>Security Service Man Count</FormLabel>
                                    <FormControl>
                                        <Input
                                            type="number"
                                            placeholder="Security Service Man Count"
                                            {...field}
                                            onBlur={(e) => {
                                                field.onBlur();
                                                const numValue = parseFloat(e.target.value);
                                                if (!isNaN(numValue)) {
                                                    field.onChange(numValue);
                                                }
                                            }}
                                        />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                        <FormField
                            control={form.control}
                            name="info.garageCount"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>Total Garage Count In Numbers</FormLabel>
                                    <FormControl>
                                        <Input
                                            type="number"
                                            placeholder="Total Garage Count"
                                            {...field}
                                            onBlur={(e) => {
                                                field.onBlur();
                                                const numValue = parseFloat(e.target.value);
                                                if (!isNaN(numValue)) {
                                                    field.onChange(numValue);
                                                }
                                            }}
                                        />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                        <FormField
                            control={form.control}
                            name="info.managementRoomId"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>Management Room ID Assign</FormLabel>
                                    <FormControl>
                                        <Input placeholder="Management Room ID" {...field} />
                                    </FormControl>
                                    <FormMessage />
                                </FormItem>
                            )}
                        />
                    </div>
                    {buildTypesID && <Button type="submit" className="w-full">Add Build </Button>}
                </form>
            </Form>
        </div>

    );

};

export { BuildsForm }