import React, { useEffect,useState } from 'react'
import { useForm ,Controller} from 'react-hook-form';
import { set, z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { MasterRespository } from '../../repositories/MastersRepository';
import { cacheData,getCachedData } from '../../slices/apiDataManager';
import showToast from '../../services/toastService';
import {useUpdateWorkCategory} from '../../hooks/masterHook/useMaster';



const schema = z.object({
  name: z.string().min(1, { message: "Work Category is required" }),
  description: z.string().min(1, { message: "Description is required" })
  .max(255, { message: "Description cannot exceed 255 characters" }),
});



const EditWorkCategory = ({data,onClose}) => {
   
const {
  register,
  handleSubmit,
  formState: { errors },
  reset,
} = useForm({
  resolver: zodResolver(schema),
  defaultValues: {
    name: data?.name || "",
    description: data?.description || "",
  },
});

const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 0);
const maxDescriptionLength = 255;

const { mutate: updateWorkCategory, isPending: isLoading } = useUpdateWorkCategory(() => onClose?.());

const onSubmit = (formdata) => {
  const payload = {
    id: data?.id,
    name: formdata.name,
    description: formdata.description,
  };

  updateWorkCategory({id:data?.id,payload});
};

    //  const onSubmit = (formdata) => {
    //   setIsLoading(true)
    //   const result = {
    //     id:data?.id,
    //     name: formdata?.name,
    //     description: formdata.description,  
    //   };

     
    
    //   MasterRespository.updateWorkCategory(data?.id,result).then((resp)=>{
    //     setIsLoading(false) 
    //     showToast("Work Category Update successfully.", "success");
    //     const cachedData = getCachedData("Work Category");
    //     if (cachedData) {

    //       const updatedData = cachedData.map((category) =>
    //         category.id === data?.id ? { ...category, ...resp.data } : category
    //       );
    //       cacheData("Work Category", updatedData);
    //     }

    //     onClose()
    //   }).catch((error)=>{
    //      showToast(error?.response?.data?.message, "error")
    //     setIsLoading(false)
    //   })
     
    // };
useEffect(() => {
  reset({
    name: data?.name || "",
    description: data?.description || "",
  });
  setDescriptionLength(data?.description?.length || 0);
}, [data, reset]);


     
  return (<>
    <form  className="row g-2" onSubmit={handleSubmit(onSubmit)}>
        <div className="col-12 col-md-12">
          <label className="form-label">Category Name</label>
          <input type="text" 
           {...register("name")} 
             className={`form-control ${errors.name ? 'is-invalids' : ''}`}
          />
          {errors.name && <p className="text-danger">{errors.name.message}</p>}
        </div> 
        <div className="col-12 col-md-12">
          <label className="form-label" htmlFor="description">Description</label>
        <textarea
          rows="3"
          {...register("description")}
          className={`form-control ${errors.description ? 'is-invalids' : ''}`}
          onChange={(e) => {
            setDescriptionLength(e.target.value.length);
            register("description").onChange(e);
          }}
        ></textarea>
        <div className="text-end small text-muted">
          {maxDescriptionLength - descriptionLength} characters left
        </div>
        {errors.description && (
          <p className="text-danger">{errors.description.message}</p>
        )}

        </div>

        <div className="col-12 text-center">
        <button type="submit" className="btn btn-sm btn-primary me-3">           
         {isLoading? "Please Wait...":"Submit"}       
        </button>
        <button
          type="reset"
          className="btn btn-sm btn-label-secondary"
          data-bs-dismiss="modal"
          aria-label="Close"
        >
          Cancel
        </button>
      </div>
     
    </form>
 
    </>
  )
}

export default EditWorkCategory;