import { postData } from "@/utils/fetch";
import { useParseError } from "@/utils/lib/helpers";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation } from "@tanstack/react-query";
import { Modal } from "flowbite-react";
import Image from "next/image";
import { FC, useRef } 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 CompanyWalletForm: FC<props> = ({
  isOpen = false,
  setOpen = () => {},
}) => {
  const zoneForm = useForm<TSbalanceSchema>({
    resolver: zodResolver(balanceSchema),
    mode: "onChange",
  });

  const inputRef = useRef<HTMLInputElement>(null);

  const {
    handleSubmit,
    getValues,
    formState: { errors },
  } = zoneForm;

  const { mutate: makePayment, isPending } = useMutation({
    mutationFn: async (statusData) => {
      const data = await postData(`/api/v1/bkash-balance-recharge`, statusData);
      if (!data?.success) {
        throw data;
      }
      return data?.data;
    },
    onSuccess: (data) => {},
    onError: (error) => {
      toast.error(useParseError(error));
    },
  });

  const onSubmit = async (data: TSbalanceSchema) => {
    makePayment(data as any);
    console.log(data);
  };

  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 {...zoneForm}>
          <form onSubmit={handleSubmit(onSubmit, onError)}>
            <div className="grid grid-cols-1">
              <div className="mt-1">
                <InputField
                  labelText="Amount"
                  name="balance"
                  placeholder="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>
      </Modal.Footer>
    </Modal>
  );
};

export default CompanyWalletForm;