"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { Label, Spinner } from "flowbite-react";
import { FC, useRef, useState } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { toast } from "react-toastify";
import Button from "../Button";
import { Modal } from "../Modal";
import { InputField, Select, Textarea } from "../forms/Inputs";
import { TSdeviceSchema, deviceSchema } from "../forms/schema/device";
import getData, { postData, putData } from "@/utils/fetch";
import dynamic from "next/dynamic";
import { useParseError } from "@/utils/lib/helpers";

const DropdownList = dynamic(() => import("../common/Dropdown"));

type Props = {
    device?: TSdeviceSchema;
    mode?: string;
    isOpen: boolean;
    setOpen: (x: boolean) => void;
};

const DeviceForm: FC<Props> = ({ device, isOpen, setOpen, mode = "create" }) => {
    const queryClient = useQueryClient();

    const deviceForm = useForm<TSdeviceSchema>({
        resolver: zodResolver(deviceSchema),
        defaultValues: device as TSdeviceSchema || {
            name: "",
            device_type_id: 0,
            network_id: undefined,
            device_id: undefined,
            input_port: "",
            total_port: "",
            zone_id: undefined,
            latitude: 0,
            longitude: 0,
            fiber_code: "",
            note: "",
        },
    });

    const inputRef = useRef<HTMLInputElement>(null);

    const {
        handleSubmit,
        reset,
        formState: { errors },
    } = deviceForm;

    const {
        mutate: submitDevice,
        isPending,
    } = useMutation({
        mutationFn: async (deviceData: TSdeviceSchema) => {
            if (mode === "create") {
                const api_url = `/api/v1/devices`;
                const data = await postData(api_url, deviceData);
                if (!data?.success) {
                    throw data;
                }
                return data?.data;
            }
            if (mode === 'edit') {
                const api_url = `/api/v1/devices/${device?.id}`;
                const data = await putData(api_url, deviceData);
                if (!data?.success) {
                    throw data;
                }
                return data?.data;
            }
        },
        onSuccess: (data) => {
            setOpen(false);
            toast.success(`Device ${mode} successfully!`);
            queryClient.invalidateQueries({ queryKey: ["devices"] })
            reset();
        },
        onError: (error: any) => {
            toast.error(useParseError(error));
        },
    });

    const onSubmit = async (data: TSdeviceSchema) => {
        console.log(data);
        submitDevice(data);
    };

    const onError = async (data: any) => {
        console.log(data);
    };


    return (
        <>
            <Modal onClose={() => setOpen(false)} show={isOpen} size={"4xl"}>
                <Modal.Header className="border-b border-gray-200 !p-4 dark:border-gray-700">
                    <div className="font-normal">
                        {mode === "create" ? "Add new device" : "Edit device"}
                    </div>
                </Modal.Header>
                <Modal.Body className="py-2">
                    <FormProvider {...deviceForm}>
                        <form onSubmit={handleSubmit(onSubmit, onError)}>
                            <div className="grid grid-cols-1 gap-x-6 sm:grid-cols-2">
                                <div className="mt-1">
                                    <div className="mb-2">
                                        <Label>Network</Label>
                                    </div>
                                    <DropdownList
                                        name="network"
                                        idName="network_id"
                                        getLabel={(option: any) => option.name}
                                        defaultItems={device?.network?.name}
                                        placeholder="Select Network"
                                        isMulti={false}
                                        key={device?.device_type?.id}
                                    />
                                </div>
                                <div className="mt-1">
                                    <div className="mb-2">
                                        <Label>Device Type</Label>
                                    </div>
                                    <DropdownList
                                        name="device_type"
                                        idName="device_type_id"
                                        getLabel={(option: any) => option.name}
                                        defaultItems={device?.device_type?.name}
                                        placeholder="Select Device Type"
                                        isMulti={false}
                                        key={device?.device_type?.id}
                                    />
                                </div>
                                <div className="mt-1">
                                    <InputField
                                        labelText="Device Name"
                                        name="name"
                                        placeholder="Device Name"
                                        errors={errors}
                                    />
                                </div>


                                <div className="mt-1">
                                    <div className="mb-2">
                                        <Label>Parent Device (Optional)</Label>
                                    </div>
                                    <DropdownList
                                        name="device"
                                        idName="device_id"
                                        getLabel={(option: any) => option.name}
                                        defaultItems={device?.device?.name}
                                        placeholder="Select Parent Device"
                                        isMulti={false}
                                        key={device?.device?.id}
                                    />
                                </div>
                                <div className="mt-1">
                                    <InputField
                                        labelText="Device IP"
                                        name="device_ip"
                                        placeholder="Device IP Address"
                                        errors={errors}
                                    />
                                </div>
                                <div className="mt-1">
                                    <div className="mb-2">
                                        <Label>Zone (Optional)</Label>
                                    </div>
                                    <DropdownList
                                        name="zone"
                                        idName="zone_id"
                                        getLabel={(option: any) => option.name}
                                        defaultItems={device?.zone?.name}
                                        placeholder="Select Zone"
                                        isMulti={false}
                                        key={device?.zone?.id}
                                    />
                                </div>
                                <div className="mt-1">
                                    <InputField
                                        labelText="Input Port"
                                        name="input_port"
                                        placeholder="Input Port"
                                        errors={errors}
                                    />
                                </div>
                                <div className="mt-1">
                                    <InputField
                                        labelText="Total Port"
                                        name="total_port"
                                        placeholder="Total Port"
                                        errors={errors}
                                    />
                                </div>
                                <div className="mt-1">
                                    <InputField
                                        labelText="Latitude"
                                        name="latitude"
                                        placeholder="Latitude"
                                        errors={errors}
                                    />
                                </div>

                                <div>
                                    <InputField
                                        labelText="Fiber Code"
                                        name="fiber_code"
                                        placeholder="Fiber Code"
                                        errors={errors}
                                    />
                                </div>
                                <div className="mt-1">
                                    <InputField
                                        labelText="Longitude"
                                        name="longitude"
                                        placeholder="Longitude"
                                        errors={errors}
                                    />
                                </div>
                                <div className="mt-1">
                                    <InputField
                                        labelText="Device order"
                                        name="device_order"
                                        placeholder="Device Order"
                                        errors={errors}
                                    />
                                </div>

                                <div className="mt-1">
                                    <Select
                                        defaultValue={'active'}
                                        options={[
                                            { value: 'active', label: "Active" },
                                            { value: 'inactive', label: "Inactive" },
                                        ]}
                                        labelText="Status"
                                        name="status"
                                        errors={errors}
                                    />
                                </div>
                            </div>
                            <div className="mt-6">
                                <Textarea
                                    rows={3}
                                    labelText="Note"
                                    name="note"
                                    placeholder="Optional note"
                                    errors={errors}
                                />
                            </div>
                            <input className="opacity-0" type="submit" ref={inputRef} />
                        </form>
                    </FormProvider>
                </Modal.Body>
                <Modal.Footer>
                    <Button color="blue" onClick={() => inputRef.current?.click()}>
                        {isPending && (
                            <Spinner aria-label="Spinner button example" size="sm" />
                        )}
                        Submit
                    </Button>
                </Modal.Footer>
            </Modal>
        </>
    );
};

export default DeviceForm;