import React, { useEffect } from "react";
import Label from "../common/Label";
import { useAppFormContext } from "../../hooks/appHooks/useAppForm";
import DatePicker from "../common/DatePicker";
import { useInvoiceAttachmentTypes } from "../../hooks/masterHook/useMaster";

const PurchasePaymentDetails = () => {
  const { data, isLoading, error, isError } = useInvoiceAttachmentTypes();
  const {
    register,
    watch,
    setValue,
    control,
    formState: { errors },
  } = useAppFormContext();

  const baseAmount = watch("baseAmount");
  const taxAmount = watch("taxAmount");

  useEffect(() => {
    const base = parseFloat(baseAmount) || 0;
    const tax = parseFloat(taxAmount) || 0;

    if (base || tax) {
      setValue("totalAmount", (base + tax).toFixed(2));
    }
  }, [baseAmount, taxAmount, setValue]);

  return (
    <div className="row g-2 text-start">
      <div className="col-12 col-md-4">
        <Label htmlFor="baseAmount" required>
          Base Amount
        </Label>

        <input
          id="baseAmount"
          type="number"
          className="form-control form-control-md"
          {...register("baseAmount")}
        />

        {errors?.baseAmount && (
          <div className="small danger-text mt-1">
            {errors.baseAmount.message}
          </div>
        )}
      </div>

      <div className="col-12 col-md-4">
        <Label htmlFor="taxAmount" required>
          Tax Amount
        </Label>

        <input
          id="taxAmount"
          type="number"
          className="form-control form-control-md"
          {...register("taxAmount")}
        />

        {errors?.taxAmount && (
          <div className="small danger-text mt-1">
            {errors.taxAmount.message}
          </div>
        )}
      </div>

      <div className="col-12 col-md-4">
        <Label htmlFor="totalAmount" required>
          Total Amount
        </Label>

        <input
          id="totalAmount"
          type="number"
          className="form-control form-control-md"
          {...register("totalAmount")}
          readOnly
        />

        {errors?.totalAmount && (
          <div className="small danger-text mt-1">
            {errors.totalAmount.message}
          </div>
        )}
      </div>

      <div className="col-12 col-md-6">
        <Label htmlFor="transportCharges">Transport Charges</Label>

        <input
          id="transportCharges"
          type="number"
          className="form-control form-control-md"
          {...register("transportCharges")}
        />

        {errors?.transportCharges && (
          <div className="small danger-text mt-1">
            {errors.transportCharges.message}
          </div>
        )}
      </div>

      <div className="col-12 col-md-6">
        <Label htmlFor="paymentDueDate">Payment Due Date</Label>

        <DatePicker
          name={"paymentDueDate"}
          control={control}
          className="w-full"
        />

        {errors?.paymentDueDate && (
          <div className="small danger-text mt-1">
            {errors.paymentDueDate.message}
          </div>
        )}
      </div>

      <div className="col-12">
        <Label htmlFor="description" required>
          Description
        </Label>

        <textarea
          id="description"
          rows="3"
          className="form-control form-control-md"
          {...register("description")}
        />

        {errors?.description && (
          <div className="small danger-text mt-1">
            {errors.description.message}
          </div>
        )}
      </div>
    </div>
  );
};

export default PurchasePaymentDetails;