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';



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



const EditJobRole = ({data,onClose}) => {
   
     const[isLoading,setIsLoading] = useState(false)
     const {
      register,
      handleSubmit,
      formState: { errors } ,reset
    } = useForm({
      resolver: zodResolver(schema),
      defaultValues: {
        role: data?.name || "",
        description:data?.description || "",
      
      },
    });
    
    const onSubmit = (formdata) => {
      setIsLoading(true)
      const result = {
        id:data?.id,
        name: formdata?.role,
        description: formdata.description,  
      };

     
    
      MasterRespository.updateJobRole(data?.id,result).then((resp)=>{
        setIsLoading(false) 
        showToast("JobRole Update successfully.", "success");
        const cachedData = getCachedData("Job Role");
        if (cachedData) {

          const updatedData = cachedData.map((role) =>
            role.id === data?.id ? { ...role, ...resp.data } : role
          );
          cacheData("Job Role", updatedData);
        }

        onClose()
      }).catch((error)=>{
        showToast("JobRole added successfully.", "success");
         showToast(error.message, "error")
        setIsLoading(false)
      })
     
    };

 
    useEffect(()=>{
      reset({
          role:data?.name,
          description:data?.description
      })
    
    },[data,reset])
     
  return (<>
    <form  className="row g-2" onSubmit={handleSubmit(onSubmit)}>
        <div className="col-12 col-md-12">
          <label className="form-label">Role</label>
          <input type="text" 
           {...register("role")} 
             className={`form-control ${errors.role ? 'is-invalids' : ''}`}
          />
          {errors.role && <p className="text-danger">{errors.role.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' : ''}`}
          ></textarea>
          {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 EditJobRole;