"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 { 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, Textarea } from "../forms/Inputs";
import { balanceSchema, TSbalanceSchema } from "../forms/schema/wallets";
import dynamic from "next/dynamic";
import Spinner from "../spinner";
const DropdownList = dynamic(() => import("../common/Dropdown"));

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

const ClientWalletForm: FC<props> = ({ isOpen = false, setOpen = () => { } }) => {
  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: walletRecharge, isPending } = useMutation({
    mutationFn: async (statusData) => {
      const data = await postData(
        `/api/v1/client-wallet-recharge`,
        statusData
      );
      if (!data?.success) {
        throw data;
      }
      return data?.data;
    },
    onSuccess: (data) => {
      console.log(data);
      if (data?.message) {
        toast.success(data.message);
        queryClient.invalidateQueries({ queryKey: ["client-wallets"] });
      }
      setOpen(false);
    },

    onError: (error) => {
      toast.error(useParseError(error));
    },
  });


  const onSubmit = async (data: TSbalanceSchema) => {
    const amount = useParseFloat(data?.balance);
    if (amount === 0) {
      toast.error(`amount must be grater then 0`);
    } else {
      console.log('test');
    }
    walletRecharge(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 client</p>
      </Modal.Header>
      <Modal.Body>
        <FormProvider {...walletForm}>
          <form onSubmit={handleSubmit(onSubmit, onError)}>
            <div className="grid grid-cols-1">
              <div>
                <label htmlFor="subject_id" className="block mb-2">Client</label>
                <DropdownList
                  name="client"
                  idName="client_id"
                  getLabel={(option: any) => option.name}
                  placeholder="Select Client"
                  isMulti={false}
                />
              </div>
              <div className="mt-1">
                <InputField
                  labelText="Amount"
                  name="balance"
                  placeholder="Recharge amount"
                  errors={errors}
                />
              </div>
              <div className="mt-1">
                <Textarea
                  labelText="Note"
                  name="note"
                  placeholder="Note"
                  rows={2}
                  errors={errors}
                />
              </div>
            </div>
            <input className="opacity-0" type="submit" ref={inputRef} />
          </form>
        </FormProvider>
      </Modal.Body>
      <Modal.Footer>
        <ActionButton isLoading={isPending} type="any" onClick={() => inputRef.current.click()}>
          <span className="block ml-2">Submit</span>
        </ActionButton>
      </Modal.Footer>
    </Modal>
  );
};

export default ClientWalletForm;