"use client";
import ValidationError from "@/components/ValidationError";
import { User } from "@/interfaces/User";
import { usePermission } from "@/utils/auth/permission";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation } from "@tanstack/react-query";
import axios from "axios";
import { useRouter } from "next/navigation";
import { FC, useEffect, useRef, useState } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { HiPlusCircle } from "react-icons/hi";
import { toast } from "react-toastify";
import Button from "../Button";
import PageHeader from "../PageHeder";
import ActionButton from "../action-button";
import DropdownList from "../common/Dropdown";
import { revalidatePath } from "../common/revalidate";
import {
  Datepicker,
  InputField,
  Radio,
  Select,
  Textarea,
} from "../forms/Inputs";
import { TSclientSchema } from "../forms/schema/client";
import { TSpaymentSchema, paymentSchema } from "../forms/schema/payment";
import PaymentMethodForm from "../payment-methods/payment-method-form";

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

const PaymentForm: FC<Props> = ({ payment, client, isEdit = false }) => {
  const route = useRouter();
  const [status, setStatus] = useState("paid");
  const [openPaymentMethod, setPaymentMethod] = useState(false);
  const zoneForm = useForm<TSpaymentSchema>({
    resolver: zodResolver(paymentSchema),
    mode: "onChange",
    defaultValues: payment as TSpaymentSchema,
  });
  const inputRef = useRef<HTMLInputElement>(null);

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

  const {
    mutate: submitPayment,
    isPending,
    error,
    isError,
    isSuccess,
  } = useMutation({
    mutationFn: async (paymentData: TSpaymentSchema) => {
      const api_url = isEdit ? `/api/payments/${payment?.id}` : `/api/payments`;
      const method = isEdit ? "put" : "post";
      const { data } = await axios({
        method: method,
        url: api_url,
        data: paymentData,
      });
      return data.data as User;
    },
    onSuccess: (data) => {
      toast.success(`Payment ${isEdit ? "edit" : "create"} successfully!`);
      revalidatePath("/payments");
      route.push("/payments");
      reset();
    },
    onError: (error: any) => { },
  });
  const onSubmit = async (data: TSpaymentSchema) => {
    delete data.id;
    console.log(data);
    submitPayment(data);
  };

  const onError = async (data: any) => {
    console.log(data);
  };
  useEffect(() => {
    if (isEdit && payment?.status === "due") {
      setValue("amount", payment?.amount as number);
    }
  }, [isEdit]);

  const paymentStatus = () => {
    if (isEdit) {
      return [
        { value: "paid", label: "Paid" },
        { value: "due", label: "Due" },
      ];
    }
    return [
      { value: "paid", label: "Paid" },
      { value: "due", label: "Due" },
      { value: "partial_paid", label: "Partial Paid" },
    ];
  };

  return (
    <>
      {isError && (
        <ValidationError
          message={error?.message}
          data={error?.response?.data?.error?.errors}
        />
      )}
      {openPaymentMethod && (
        <PaymentMethodForm
          mode="create"
          isOpen={openPaymentMethod}
          setOpen={setPaymentMethod}
        />
      )}
      <PageHeader>
        <div className="flex justify-between !p-0">
          <h2 className="text-xl font-semibold">
            {isEdit ? "Edit Payment" : "Add Bill"}
          </h2>
          {usePermission("payments.create") && (
            <div>
              <ActionButton href="/payments" type="back" />
            </div>
          )}
        </div>
      </PageHeader>
      <div className="p-5 bg-white">
        {client && (
          <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 Title"
                    mandatory={true}
                    name="title"
                    placeholder="Payment Title"
                    errors={errors}
                  />
                </div>
                <div className="mt-1">
                  <InputField
                    mandatory={true}
                    labelText="Amount"
                    name="amount"
                    placeholder="Amount of Taka"
                    errors={errors}
                  />
                </div>
                <div className="mt-1">
                  <label htmlFor="" className="block mb-2">
                    Client
                  </label>
                  <DropdownList
                    name="client"
                    placeholder="Client"
                    idName="client_id"
                    isMulti={false}
                    getLabel={(dropdownClient) => dropdownClient.name}
                    defaultItems={payment?.client}
                  />
                </div>
                <div className="mt-1">
                  <Datepicker
                    name="payment_date"
                    labelText="Payment Date"
                    defaultDate={payment?.payment_date}
                  />
                </div>
                <div className="flex items-center gap-2 mt-2">
                  <Radio
                    groupLabel="Confirm SMS"
                    name="confirmation_sms"
                    options={[
                      { label: "Yes", value: 1 },
                      { label: "No", value: 0 },
                    ]}
                    defaultValue={1}
                  />
                </div>
              </div>
              <div className="right">
                <div className="mt-1">
                  <label htmlFor="" className="block mb-2">
                    Payment Method (Fund)
                  </label>
                  <div className="grid grid-cols-10 md:grid-cols-12">
                    <div className="col-span-11">
                      <DropdownList
                        name="fund"
                        idName="fund_id"
                        getLabel={(method: any) => method?.name}
                        placeholder="Fund"
                        isMulti={false}
                        key={+openPaymentMethod}
                        defaultItems={payment?.fund}
                      />
                    </div>
                    <div>
                      {usePermission("payment-methods.create") ? (
                        <>
                          <Button
                            className="ml-1 border rounded-md"
                            color="white"
                            onClick={() => setPaymentMethod(true)}
                          >
                            <HiPlusCircle className="text-2xl text-blue-600 " />
                          </Button>
                        </>
                      ) : (
                        <Button
                          className="ml-1 border rounded-md"
                          color="white"
                        >
                          <HiPlusCircle className="text-2xl text-blue-600 " />
                        </Button>
                      )}
                    </div>
                  </div>
                </div>
                <div className="mt-1">
                  <InputField
                    labelText="Transaction ID"
                    name="transaction_id"
                    placeholder="Transaction ID"
                    errors={errors}
                  />
                </div>
                <div className="mt-1">
                  <InputField
                    labelText="Discount"
                    name="discount"
                    placeholder="Discount"
                    errors={errors}
                  />
                </div>
                <div className="mt-1">
                  <Select
                    defaultValue={payment?.status ?? "paid"}
                    options={paymentStatus()}
                    labelText="Status"
                    name="status"
                    errors={errors}
                    onChange={(e) => setStatus(e.target.value)}
                  />
                </div>
                {status === "partial_paid" && (
                  <div className="mt-1">
                    <InputField
                      labelText="Partial Amount paid"
                      name="partial_amount"
                      placeholder="Partial payment amount paid"
                      errors={errors}
                    />
                  </div>
                )}
              </div>
            </div>
            <div className="mt-2">
              <Textarea
                labelText="Note"
                name="note"
                rows={2}
                placeholder="Note"
              />
            </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>
        <ActionButton
          isLoading={isPending}
          type="submit"
          onClick={() => inputRef.current?.click()}
        />
      </div>
    </>
  );
};

export default PaymentForm;