"use client";
import { postData, putData } from "@/utils/fetch";
import { useParseError } from "@/utils/lib/helpers";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { Spinner } from "flowbite-react";
import dynamic from "next/dynamic";
import { FC, useRef } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { toast } from "react-toastify";
import Button from "../Button";
import { Modal } from "../Modal";
import { InputField } from "../forms/Inputs";
import {
  mikrotikPackageSchema,
  TSmikrotikPackageSchema,
} from "../forms/schema/mikrotik-package";
import { TSzoneSchema } from "../forms/schema/zone";
const DropdownList = dynamic(() => import("@/components/common/Dropdown"));

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

const MikrotikPackageForm: FC<Props> = ({
  mikrotikPackage,
  isOpen,
  setOpen,
  mode = "create",
}) => {
  const queryClient = useQueryClient();
  const packageForm = useForm<TSmikrotikPackageSchema>({
    resolver: zodResolver(mikrotikPackageSchema),
    mode: "onChange",
    defaultValues: mikrotikPackage as TSmikrotikPackageSchema,
  });

  const inputRef = useRef<HTMLInputElement>(null);

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

  const { mutate: submitPackage, isPending } = useMutation({
    mutationFn: async (packageData: TSmikrotikPackageSchema) => {
      if (mode === "create") {
        const data = await postData(`/api/v1/mikrotik-packages`, packageData);
        if (!data?.success) {
          throw data;
        }
        return data?.data;
      }
      if (mode === "edit") {
        const data = await putData(
          `/api/v1/mikrotik-packages/${mikrotikPackage?.id}`,
          packageData
        );
        if (!data?.success) {
          throw data;
        }
        return data?.data;
      }
    },
    onSuccess: (data) => {
      setOpen(false);
      queryClient.invalidateQueries({ queryKey: ["mikrotik-packages"] });
      toast.success(`Mikrotik package ${mode} successful!`);
      reset();
    },
    onError: (error: any) => {
      toast.error(useParseError(error));
      setOpen(false);
      reset();
    },
  });
  const onSubmit = async (data: TSzoneSchema) => {
    console.log(data, "sub");
    submitPackage(data);
  };

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

  return (
    <>
      <Modal onClose={() => setOpen(false)} show={isOpen} size={"3xl"}>
        <Modal.Header className="border-b border-gray-200 !p-6 dark:border-gray-700">
          {mode === "create" ? (
            <p className="font-normal">Add new package</p>
          ) : (
            <p className="font-normal">Edit package</p>
          )}
        </Modal.Header>
        <Modal.Body>
          <FormProvider {...packageForm}>
            <form onSubmit={handleSubmit(onSubmit, onError)}>
              <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
                <div>
                  <div className="mt-2 mb-1">
                    <label htmlFor="network_id">Network</label>
                  </div>
                  <DropdownList
                    name="network"
                    idName="network_id"
                    getLabel={(network: any) => network?.name}
                    isMulti={false}
                    defaultItems={mikrotikPackage?.network}
                  />
                </div>
                <div>
                  <div className="mt-1">
                    <InputField
                      labelText="Package Name"
                      name="name"
                      placeholder="Package Name"
                      errors={errors}
                    />
                  </div>
                </div>
              </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 MikrotikPackageForm;