"use client";
import { putData } from "@/utils/fetch";
import { useParseError } from "@/utils/lib/helpers";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { Modal } from "flowbite-react";
import { FC, useRef } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { toast } from "react-toastify";
import ActionButton from "../action-button";
import { InputField, Select } from "../forms/Inputs";
import { balanceSchema, TSbalanceSchema } from "../forms/schema/wallets";
import Spinner from "../spinner";

type props = {
  isOpen: boolean;
  setOpen: (x: boolean) => void;
  company?: any;
  wallet?: TSbalanceSchema;
};

const WalletRechargeForm: FC<props> = ({
  isOpen = false,
  setOpen = () => {},
  company,
}) => {
  const queryClient = useQueryClient();
  const zoneForm = useForm<TSbalanceSchema>({
    resolver: zodResolver(balanceSchema),
    mode: "onChange",
  });

  const inputRef = useRef<HTMLInputElement>(null);

  const {
    handleSubmit,
    formState: { errors },
  } = zoneForm;
  console.log(company);
  const { mutate: makePayment, isPending } = useMutation({
    mutationFn: async (statusData) => {
      const data = await putData(
        `/api/v1/wallets/${company?.wallet.id}`,
        statusData
      );
      if (!data?.success) {
        throw data;
      }
      return data?.data;
    },
    onSuccess: (data) => {
      toast.success("Balance recharge successful!");
      setOpen(false);
      queryClient.invalidateQueries({ queryKey: ["companies"] });
    },
    onError: (error) => {
      toast.error(useParseError(error));
    },
  });

  const onSubmit = async (data: TSbalanceSchema) => {
    let bkashData = Object.assign(data, {
      amount: data.balance,
      company_id: company?.id,
    });
    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 {...zoneForm}>
          <form onSubmit={handleSubmit(onSubmit, onError)}>
            <div className="grid grid-cols-1">
              <div className="mt-1">
                <Select
                  defaultValue={1}
                  options={[
                    { value: "cash", label: "Cash" },
                    { value: "bank", label: "Bank" },
                  ]}
                  labelText="Recharge Method"
                  name="recharge_method"
                  errors={errors}
                />
              </div>
              <div className="mt-1">
                <InputField
                  labelText="Balance"
                  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 /> : <span className="block ml-2">Submit</span>}
        </ActionButton>
      </Modal.Footer>
    </Modal>
  );
};

export default WalletRechargeForm;