import React, { useEffect } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useCreateExpenseCategory, useUpdateExpenseCategory } from "../../hooks/masterHook/useMaster";
import Label from "../common/Label";

const ExpnseSchema = z.object({
  name: z.string().min(1, { message: "Name is required" }),
  noOfPersonsRequired: z.boolean().default(false),
  description: z.string().min(1, { message: "Description is required" }),
});

const ManageExpenseCategory = ({ data = null, onClose }) => {
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(ExpnseSchema),
    defaultValues: { name: "", noOfPersonsRequired: false, description: "" },
  });
  const { mutate: UpdateExpenseCategory, isPending:isPendingUpdate } = useUpdateExpenseCategory(
    () => onClose?.()
  );
  const { mutate: CreateExpenseCategory, isPending } = useCreateExpenseCategory(() =>
    onClose?.()
  );

  const onSubmit = (payload) => {
    if (data) {
      UpdateExpenseCategory({
        id: data.id,
        payload: { ...payload, id: data.id },
      });
    } else {
      CreateExpenseCategory(payload);
    }
  };

  useEffect(() => {
    if (data) {
      reset({
        name: data.name ?? "",
        noOfPersonsRequired: data.noOfPersonsRequired ?? false,
        description: data.description ?? "",
      });
    }
  }, [data]);
  return (
    <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
      <div className="col-12 col-md-12 text-start">
        <Label className="form-label" required>Expesne Type Name</Label>
        <input
          type="text"
          {...register("name")}
          className={`form-control ${errors.name ? "is-invalids" : ""}`}
        />
        {errors.name && <p className="danger-text">{errors.name.message}</p>}
      </div>
      <div className="col-12 col-md-12 text-start">
        <Label className="form-label" htmlFor="description" required>
          Description
        </Label>
        <textarea
          rows="3"
          {...register("description")}
          className={`form-control ${errors.description ? "is-invalids" : ""}`}
        ></textarea>

        {errors.description && (
          <p className="danger-text">{errors.description.message}</p>
        )}
      </div>
      <div className="col-12 col-md-12 d-flex align-items-center">
        <label className="from-label">No. of Persons Required </label>{" "}
        <input
          type="checkbox"
          className="form-check-input  ms-2"
          {...register("noOfPersonsRequired")}
        />
      </div>
      <div className="col-12 text-end">
        <button
          type="reset"
          className="btn btn-sm btn-label-secondary me-3"
          data-bs-dismiss="modal"
          aria-label="Close"
          disabled={isPending || isPendingUpdate}
          onClick={()=>onClose()}
        >
          Cancel
        </button>
        <button
          type="submit"
          className="btn btn-sm btn-primary"
          disabled={isPending || isPendingUpdate}
        >
          {isPending || isPendingUpdate
            ? "Please Wait..."
            : data
            ? "Update"
            : "Submit"}
        </button>
        
      </div>
    </form>
  );
};

export default ManageExpenseCategory;