"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 } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { toast } from "react-toastify";
import PageHeader from "../PageHeder";
import ActionButton from "../action-button";
import DropdownList from "../common/Dropdown";
import { revalidatePath } from "../common/revalidate";
import { Datepicker, InputField, Radio, Textarea } from "../forms/Inputs";
import { TSpaymentSchema, paymentSchema } from "../forms/schema/payment";

type Props = {
  payment?: TSpaymentSchema;
};

const PaymentPayForm: FC<Props> = ({ payment }) => {
  const route = useRouter();
  const zoneForm = useForm<TSpaymentSchema>({
    resolver: zodResolver(paymentSchema),
    mode: "onChange",
    defaultValues: payment as TSpaymentSchema,
  });

  const inputRef = useRef<HTMLInputElement>(null);

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

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

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

  useEffect(() => {
    setValue("amount", payment?.amount as any);
  }, [setValue]);

  return (
    <>
      {isError && (
        <ValidationError
          message={error?.message}
          data={error?.response?.data?.error?.errors}
        />
      )}

      <PageHeader>
        <div className="flex justify-between !p-0">
          <h2 className="text-xl font-semibold">Make Payment</h2>
          {usePermission("payments.create") && (
            <div>
              <ActionButton href="/payments" type="back" />
            </div>
          )}
        </div>
      </PageHeader>
      <div className="p-5 bg-white">
        <div className="pb-5">
          <p className="text-center font-bold text-red-500">
            Bill Due: {payment?.amount}
          </p>
        </div>
        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 border-b pb-3">
          <div>
            <p>ID : {payment?.client?.pppoe_username}</p>
            <p>Name : {payment?.client?.name}</p>
            <p>Bill created : {payment?.created_at}</p>
          </div>
          <div>
            <p>Phone : {payment?.client?.phone}</p>
            <p>Address : {payment?.client?.current_address}</p>
            <p>Bill Deadline : {payment?.due_date}</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="Title"
                    name="title"
                    placeholder="Bill Title"
                    errors={errors}
                    readonly={true}
                  />
                </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">
                  <InputField
                    labelText="Payment Amount"
                    name="amount"
                    placeholder="Amount of Taka"
                    errors={errors}
                    readonly={true}
                  />
                </div>
                <div className="mt-1">
                  <label htmlFor="" className="block mb-2">
                    Payment Method
                  </label>
                  <DropdownList
                    name="fund"
                    idName="fund"
                    value="label"
                    getLabel={(method: any) => method?.name}
                    placeholder="Fund"
                    isMulti={false}
                    defaultItems={"cash"}
                  />
                </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 className="right">
                <div className="mt-1">
                  <label htmlFor="" className="block mb-2">
                    Bill Type
                  </label>
                  <DropdownList
                    name="payment_type"
                    idName="payment_type_id"
                    getLabel={(paymentType: any) => paymentType?.name}
                    placeholder="Bill Type"
                    isMulti={false}
                    defaultItems={payment?.payment_type}
                  />
                </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">
                  <InputField
                    labelText="Reference"
                    name="reference"
                    placeholder="reference"
                    errors={errors}
                  />
                </div>
                <div className="mt-1">
                  <Datepicker
                    name="payment_date"
                    labelText="Received Date"
                    defaultDate={payment?.payment_date}
                  />
                </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} />
          </form>
        </FormProvider>
        {usePermission("billings.edit") && (
          <ActionButton
            isLoading={isPending}
            type="submit"
            onClick={() => inputRef.current?.click()}
          />
        )}
      </div>
    </>
  );
};

export default PaymentPayForm;