import { FC, useRef } from "react";
import { Modal } from "../Modal";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { FormProvider, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { putData } from "@/utils/fetch";
import { toast } from "react-toastify";
import { clientSchema, TSclientSchema } from "../forms/schema/client";
import ActionButton from "../action-button";
import { Label } from "flowbite-react";
import DropdownList from "../common/Dropdown";

type props = {
    client: TSclientSchema;
    isOpen: boolean;
    setOpen?: (x: boolean) => void;
};

const ClientChangePackage: FC<props> = ({ client, isOpen = false, setOpen = () => { } }) => {
    const queryClient = useQueryClient();
    const storeForm = useForm<any>({
        mode: "onChange",
        defaultValues: {},
    });
    const inputRef = useRef<HTMLInputElement>(null);

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

    const {
        mutate: submitCompany,
        isPending,
    } = useMutation({
        mutationFn: async (storeData: any) => {
            const api_url = `/api/v1/clients-change-package/${client?.id}`;
            const data = await putData(api_url, storeData);
            return data?.data;
        },
        onSuccess: (data) => {
            setOpen(false);
            queryClient.invalidateQueries({ queryKey: ["clients"] });
            toast.success(`Package update successfully!`);
            reset();
        },
        onError: (error: any) => {
            setOpen(false);
        },
    });
    const onSubmit = async (data: any) => {
        console.log(data);
        submitCompany(data);
    };

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

    return (
        <div>
            <Modal onClose={() => setOpen(false)} show={isOpen} size={"sm"}>
                <Modal.Header className="border-b border-gray-200 !p-6 dark:border-gray-700">
                    <p className="font-normal">Package Change</p>
                </Modal.Header>
                <Modal.Body>
                    <FormProvider {...storeForm}>
                        <form onSubmit={handleSubmit(onSubmit, onError)}>
                            <div>
                                <div className="border-b pb-3">
                                    <p className="font-normal">Package: {client?.package?.name}</p>
                                    <p className="font-normal">ID: {client?.pppoe_username}</p>
                                    <p className="font-normal">Phone: {client?.phone}</p>
                                </div>
                                <div className="mt-1">
                                    <div className="mb-2 mt-3">
                                        <Label>Network Packages (Mikrotik)</Label>
                                    </div>
                                    <DropdownList
                                        name="package"
                                        idName="package_id"
                                        getLabel={(mikrotik) => mikrotik.name}
                                        isMulti={false}
                                        defaultItems={client?.package}
                                    />
                                </div>
                            </div>
                            <input className="opacity-0" type="submit" ref={inputRef} />
                        </form>
                    </FormProvider>
                </Modal.Body>
                <Modal.Footer>
                    <ActionButton type="submit" isLoading={isPending} onClick={() => inputRef.current?.click()} />
                </Modal.Footer>
            </Modal>
        </div >
    );
};

export default ClientChangePackage;