"use client";
import ValidationError from "@/components/ValidationError";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import axios from "axios";
import { Spinner } from "flowbite-react";
import { useSession } from "next-auth/react";
import { FC, useEffect, useRef } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { toast } from "react-toastify";
import Button from "../Button";
import { Modal } from "../Modal";
import DropdownList from "../common/Dropdown";
import { InputField, Textarea } from "../forms/Inputs";
import { TSpackageSchema, packageSchema } from "../forms/schema/package";

type Props = {
  packageItem?: TSpackageSchema;
  mode?: string;
  isOpen: boolean;
  setOpen: (x: boolean) => void;
  package_type?: string;
};

const ResellerPackageForm: FC<Props> = ({
  packageItem,
  isOpen,
  setOpen,
  mode = "create",
  package_type = "my_package",
}) => {
  const queryClient = useQueryClient();
  const { data: session }: any = useSession();

  const packageForm = useForm<TSpackageSchema>({
    resolver: zodResolver(packageSchema),
    mode: "onChange",
    defaultValues: packageItem as TSpackageSchema,
  });

  const inputRef = useRef<HTMLInputElement>(null);

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

  const {
    mutate: submitPackage,
    isPending,
    error,
    isError,
    isSuccess,
  } = useMutation({
    mutationFn: async (packageData: TSpackageSchema) => {
      const api_url =
        mode === "create"
          ? `/api/packages`
          : `/api/packages/${packageItem?.id}`;
      const method = mode === "create" ? "post" : "put";
      const { data } = await axios({
        method: method,
        url: api_url,
        data: packageData,
      });
      return data?.data;
    },
    onSuccess: (data) => {
      setOpen(false);
      queryClient.invalidateQueries({ queryKey: ["packages"] });
      toast.success(`Package ${mode} successful!`);
      reset();
    },
    onError: (error: any) => {
      setOpen(false);
    },
  });
  const onSubmit = async (data: TSpackageSchema) => {
    delete data.network;
    console.log(data);
    submitPackage(data);
  };

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

  const setDefaultValue = (packageValue: any) => {
    if (package_type === "my_package") {
      Object.assign(packageValue, {
        price: 0,
        is_reseller_package: 0,
      });
    }
    if (package_type === "reseller_package") {
      Object.assign(packageValue, {
        price: packageValue?.buying_price,
        buying_price: 0,
        is_reseller_package: 1,
      });
    }
    reset(packageValue);
  };

  useEffect(() => {
    if (mode === "create") {
      reset({});
    }
  }, [mode]);

  return (
    <>
      {isError && (
        <ValidationError
          message={error?.message}
          data={error?.response?.data?.error?.errors}
        />
      )}
      <Modal onClose={() => setOpen(false)} show={isOpen} size={"4xl"}>
        <Modal.Header className="border-b border-gray-200 !p-6 dark:border-gray-700">
          {mode === "create" ? (
            <p className="font-normal">Add Reseller package ddd</p>
          ) : (
            <p className="font-normal">Reseller 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 className="left">
                  <div className="mt-1">
                    <label htmlFor="" className="mb-2 block">
                      Parent package
                    </label>
                    <DropdownList
                      name="my_reseller_package"
                      idName="package_parent_id"
                      isMulti={false}
                      getLabel={(packages) => packages?.name}
                      setOriginalValue={(item) => setDefaultValue(item)}
                      placeholder="Packages"
                      defaultItems={packageItem?.parent}
                    />
                  </div>
                  <div className="mt-1">
                    <InputField
                      labelText="Bandwidth"
                      name="bandwidth"
                      placeholder="Bandwidth ex:2mbps"
                      errors={errors}
                      disabled={session?.user?.reseller_id ? true : false}
                    />
                  </div>
                  <div className="mt-1">
                    <InputField
                      labelText="package name"
                      name="name"
                      placeholder="package Name"
                      errors={errors}
                    />
                  </div>
                </div>
                <div>
                  <div className="mt-1">
                    <InputField
                      labelText={
                        package_type === "my_package"
                          ? "Buying Price"
                          : "Reseller Price"
                      }
                      name="buying_price"
                      placeholder="Reseller Price"
                      errors={errors}
                      disabled={package_type === "my_package" ? true : false}
                    />
                  </div>
                  <div className="mt-1">
                    <InputField
                      labelText={
                        package_type === "my_package"
                          ? "Package Price"
                          : "Buying Price"
                      }
                      name="price"
                      placeholder="Price"
                      errors={errors}
                      disabled={
                        package_type === "reseller_package" ? true : false
                      }
                    />
                  </div>
                </div>
              </div>
              <div>
                <div className="mt-1">
                  <Textarea
                    labelText="Note"
                    name="note"
                    placeholder="Note"
                    errors={errors}
                    rows={2}
                  />
                </div>
              </div>
              <div className="grid grid-cols-1 gap-6 sm:grid-cols-1"></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 ResellerPackageForm;