"use client";
import Toasts from "@/components/Toasts";
import ValidationError from "@/components/ValidationError";
import { User } from "@/interfaces/User";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import axios from "axios";
import { Spinner } from "flowbite-react";
import { FC, useRef, useState } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { FaRegMoneyBillAlt } from "react-icons/fa";
import Button from "../Button";
import { Modal } from "../Modal";
import { InputField, Radio, Select, Textarea } from "../forms/Inputs";
import { TSclientSchema } from "../forms/schema/client";
import { TSpaymentSchema, paymentSchema } from "../forms/schema/client-payment";

type Props = {
  payment?: TSpaymentSchema;
  client?: TSclientSchema;
};

const CashPayment: FC<Props> = ({ client }) => {
  const [isOpen, setOpen] = useState(false);
  const queryClient = useQueryClient();
  const zoneForm = useForm<TSpaymentSchema>({
    resolver: zodResolver(paymentSchema),
    mode: "onChange",
  });

  const inputRef = useRef<HTMLInputElement>(null);

  const {
    handleSubmit,
    reset,
    control,
    register,
    formState: { errors },
  } = zoneForm;

  const {
    mutate: submitPayment,
    isPending,
    error,
    isError,
    isSuccess,
  } = useMutation({
    mutationFn: async (paymentData: TSpaymentSchema) => {
      const api_url = `/api/payments`;
      const { data } = await axios({
        method: "post",
        url: api_url,
        data: paymentData,
      });
      return data.data as User;
    },
    onSuccess: (data) => {
      setOpen(false);
      setTimeout(() => {
        queryClient.invalidateQueries({ queryKey: ["payments"] });
      }, 1000);
      reset();
    },
    onError: (error: any) => {
      setOpen(false);
      reset();
    },
  });
  const onSubmit = async (data: TSpaymentSchema) => {
    delete data.id;
    console.log(data);
    submitPayment(data);
  };

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

  return (
    <>
      {isError && (
        <ValidationError
          message={error?.message}
          data={error?.response?.data?.error?.errors}
        />
      )}
      {isSuccess && <Toasts message="Zone update successful!" />}
      <div
        className="w-full px-4 py-3 flex cursor-pointer"
        onClick={() => setOpen(true)}
      >
        <FaRegMoneyBillAlt className="text-lg mr-3" />
        <p>Add Payment</p>
      </div>
      <Modal onClose={() => setOpen(false)} show={isOpen}>
        <Modal.Header className="border-b border-gray-200 !p-6 dark:border-gray-700">
          <p className="font-normal">Add Cash Payment</p>
        </Modal.Header>
        <Modal.Body>
          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 border-b pb-3">
            <div>
              <p>ID : {client?.client_id}</p>
              <p>Name : {client?.name}</p>
            </div>
            <div>
              <p>Phone : {client?.phone}</p>
              <p>Address : {client?.current_address}</p>
            </div>
          </div>
          <FormProvider {...zoneForm}>
            <form onSubmit={handleSubmit(onSubmit, onError)} className="mt-3">
              <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
                <div className="left">
                  <div className="mt-1">
                    <InputField
                      labelText="Payment Amount"
                      name="payment_received"
                      placeholder="Amount of Taka"
                      errors={errors}
                    />
                  </div>
                  <div className="mt-1">
                    <Select
                      name="payment_method"
                      labelText="Payment Method"
                      defaultValue={"cash"}
                      options={[
                        { value: "cash", label: "Cash" },
                        { value: "bank", label: "Bank" },
                      ]}
                    />
                  </div>
                </div>
                <div className="right">
                  <div className="mt-1">
                    <InputField
                      labelText="Discount"
                      name="discount"
                      placeholder="Zone Name"
                      errors={errors}
                    />
                  </div>
                  <div className="flex items-center gap-2">
                    <Radio
                      groupLabel="Confirm SMS"
                      name="confirmation_sms"
                      options={[
                        { label: "Yes", value: 1 },
                        { label: "No", value: 0 },
                      ]}
                      defaultValue={1}
                    />
                  </div>
                </div>
              </div>
              <div>
                <Textarea labelText="Note" name="note" rows={2} />
              </div>
              <div className="grid grid-cols-1 gap-6 sm:grid-cols-1"></div>
              <input className="opacity-0" type="submit" ref={inputRef} />
              <input
                {...register("zone_id")}
                value={client?.zone?.id}
                type="hidden"
              />
            </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 CashPayment;