"use client";
import { postData } from "@/utils/fetch";
import { useParseError, useParseFloat } from "@/utils/lib/helpers";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { Modal } from "flowbite-react";
import Image from "next/image";
import { useRouter, useSearchParams } from "next/navigation";
import { FC, useEffect, useRef, useState } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { toast } from "react-toastify";
import ActionButton from "../action-button";
import { InputField } from "../forms/Inputs";
import { balanceSchema, TSbalanceSchema } from "../forms/schema/wallets";
import Spinner from "../spinner";
import bkashImage from "/public/static/bkash.png";

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

const BkashWalletForm: FC<props> = ({ isOpen = false, setOpen = () => { } }) => {
  const route = useRouter();
  const params = useSearchParams();
  const [mode, setMode] = useState("create");
  const now = new Date();
  const hour = now.getHours();
  const minute = now.getMinutes();
  const queryClient = useQueryClient();
  const walletForm = useForm<TSbalanceSchema>({
    resolver: zodResolver(balanceSchema),
    mode: "onChange",
  });

  const inputRef = useRef<HTMLInputElement>(null);

  const {
    handleSubmit,
    setValue,
    formState: { errors },
  } = walletForm;

  const { mutate: makePayment, isPending } = useMutation({
    mutationFn: async (statusData) => {
      const data = await postData(
        `/api/v1/bkash-balance-recharge/${mode}`,
        statusData
      );
      if (!data?.success) {
        throw data;
      }
      return data?.data;
    },
    onSuccess: (data) => {
      if (mode === "create" && data?.bkashURL !== undefined) {
        window.location.href = data?.bkashURL;
      }
      if (data?.message === "OK") {
        toast.success("Balance recharge successful!");
        window.location.href = `/wallets?payment=${params?.get("status")}`;
        // queryClient.invalidateQueries({ queryKey: ["my-wallet"] });
        // queryClient.invalidateQueries({ queryKey: ["wallets"] });
        // setMode("create");
        // route.push(`/wallets?payment=${params?.get("status")}`);
      }
    },
    onError: (error) => {
      toast.error(useParseError(error));
    },
  });

  const pid = Date.now();
  useEffect(() => {
    if (params.get("status") === "success") {
      setMode("execute");
    }
  }, [params]); // Only run when `params` changes

  useEffect(() => {
    if (mode === "execute") {
      if (!executedRef.current) {
        executedRef.current = true; // Prevent multiple calls

        makePayment({
          paymentID: params.get("paymentID"),
          pid: params.get("pid"),
          host: `${window?.location?.hostname}`,
        } as any);
      }
    }
  }, [mode]); // Only run when `mode` changes

  const executedRef = useRef(false);

  const onSubmit = async (data: TSbalanceSchema) => {
    const amount = useParseFloat(data?.balance);
    if (amount === 0) {
      toast.error(`amount must be grater then 0`);
    } else {
      let bkashData = Object.assign(data, {
        pid: pid,
        amount: amount,
        invoice: `RC-${hour}${minute}`,
        host: `${window?.location?.hostname}`,
        callback: `https://${window?.location?.hostname}/wallets?pid=${pid}`,
      });
      makePayment(bkashData as any);
      console.log(bkashData);
    }
  };

  const onError = async (data: any) => {
    console.log(data);
  };
  return (
    <Modal onClose={() => setOpen(false)} show={isOpen} size={"md"}>
      <Modal.Header className="border-b border-gray-200 !p-6 dark:border-gray-700">
        <p className="font-normal">Recharge balance</p>
      </Modal.Header>
      <Modal.Body>
        <FormProvider {...walletForm}>
          <form onSubmit={handleSubmit(onSubmit, onError)}>
            <div className="grid grid-cols-1">
              <div className="mt-1">
                <InputField
                  labelText="Recharge amount"
                  name="balance"
                  placeholder="Recharge amount"
                  errors={errors}
                />
              </div>
            </div>
            <input className="opacity-0" type="submit" ref={inputRef} />
          </form>
        </FormProvider>
      </Modal.Body>
      <Modal.Footer>
        <ActionButton type="any" onClick={() => inputRef.current.click()}>
          {isPending ? (
            <Spinner />
          ) : (
            <Image height={20} alt="" src={bkashImage} />
          )}
          <span className="block ml-2">Pay With bKash</span>
        </ActionButton>
        {/* <BkashBalanceRecharge
          data={{
            amount: getValues("balance"),
            paymentID: Date.now(),
            invoice: `RC-${hour}${minute}`,
          }}
        /> */}
      </Modal.Footer>
    </Modal>
  );
};

export default BkashWalletForm;