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


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 CreateJobRole = ({onClose}) => {

  const maxDescriptionLength = 255;
  const [descriptionLength, setDescriptionLength] = useState(0);

  const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
    watch,
  } = useForm({
    resolver: zodResolver(schema),
    defaultValues: {
      role: "",
      description: "",
    },
  });

  const resetForm = () => {
    reset({ role: "", description: "" });
    setDescriptionLength(0);
  };

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


   // const onSubmit = (data) => {
    //   setIsLoading(true)
    //   const result = {
    //     name: data.role,
    //     description: data.description,
    //   };
    
    //   MasterRespository.createJobRole(result).then((resp)=>{ 
    //     setIsLoading(false)
    //     resetForm()
    //     const cachedData = getCachedData("Job Role"); 
    //     const updatedData = [...cachedData, resp?.data]; 
    //     cacheData("Job Role", updatedData); 
    //     showToast("JobRole Added successfully.", "success");

    //     onClose()
    //   }).catch((error)=>{
    //     showToast(error.message, "error");
    //     setIsLoading(false)
    //   })
   
     
    // };
  const onSubmit = (data) => {
    const payload = {
      name: data.role,
      description: data.description,
    };
    createJobRole(payload);
  };

  useEffect(() => {
    const sub = watch((values) => {
      setDescriptionLength(values.description?.length || 0);
    });
    return () => sub.unsubscribe();
  }, [watch]);

  useEffect(() => {
    return () => resetForm();
  }, []);

  return (<>
    <form  className="row g-2" onSubmit={handleSubmit(onSubmit)}>
      {/* <div className="col-12 col-md-12">
        <label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Create Job Role</label>
      </div> */}
        <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' : ''}`}
          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 CreateJobRole;