import React,{useEffect, useState} from 'react'
import useMaster from '../../hooks/masterHook/useMaster'
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { RolesRepository } from '../../repositories/MastersRepository';
import { useEmployeeRoles } from '../../hooks/useEmployees';
import {useDispatch} from 'react-redux';
import {changeMaster} from '../../slices/localVariablesSlice';
import showToast from '../../services/toastService';


const formSchema = z.object({
  selectedRole: z.record(z.boolean()).refine((data) => {
    return Object.values(data).some(value => value === true); 
  }, {
    message: "At least one checkbox must be selected.",
  }),
});


const ManageRole = ({employeeId,onClosed}) => {
 
    const disptach = useDispatch()
    disptach(changeMaster("Role"))
    const [isLoading, setIsLoading] = useState(false);
    const { employeeRoles,loading } = useEmployeeRoles(employeeId);
    const {data,loading:roleLoading} = useMaster();
  
    const buildDefaultRoles = () => {
      const defaults = {};
      data.forEach((role) => {
        const isRoleEnabled = employeeRoles?.data?.some((empRole) => empRole.roleId === role.id);
        defaults[role.id] = isRoleEnabled;
      });
  
      return defaults;
    };
  
    const [initialRoles, setInitialRoles] = useState({});
  
    useEffect(() => {
      if (employeeRoles && data) {
        const updatedRoles = buildDefaultRoles();
        setInitialRoles(updatedRoles); 
      }
    }, [employeeRoles, data]);
  
    const { register, handleSubmit, formState: { errors }, reset } = useForm({
      resolver: zodResolver(formSchema),
      defaultValues: {
        selectedRole: initialRoles, 
      },
    });
  
    
  useEffect( () =>
  {
      if (Object.keys(initialRoles).length > 0) {
        reset({
          selectedRole: initialRoles, 
        });
      }
    }, [initialRoles, reset]);
  
    const onSubmit = (formdata) => {
        setIsLoading(true)
      const result = [];
      for (const [roleId, isEnabled] of Object.entries(formdata.selectedRole)) {
        if (isEnabled) {
          result.push({
            employeeId: employeeId,
            isEnabled: true,
            roleId: roleId,
          });
        }
      }
      RolesRepository.createEmployeeRoles( result ).then( ( resp ) =>
      {   
        showToast( "Role assigned successfully", "success" )
        setIsLoading(false)
        onClosed()
      }).catch((err)=>{
        console.log( err )
        setIsLoading(false)

        showToast(err.message,"error")
      })
      setIsLoading(false)
  };
  
  return (

    <div className={`modal fade `} id="managerole-modal" tabIndex="-1" aria-hidden="true" >
    <div className="modal-dialog  modal-simple modal-md d-flex align-items-center justify-content-center" >
    <div className="modal-content " >
      <div className="modal-body"  >
        <button
          type="button"
          className="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
          
        ></button>    
       <form onSubmit={handleSubmit(onSubmit)} >
                <div className='text-start my-0'>
                <p className='lead'>Select Roles</p>
       </div>
      

              <div className='d-flex flex-wrap justify-content-between align-items-center pb-5 ' style={{maxHeight: "70vh", overflowY: "scroll"}} >
                
                {(loading || roleLoading)  && <p>Loading...</p>}
        {data && data.map((item) => (
        
            
            <div className="col-md-6 col-lg-4 mb-4" key={item.id}>
              <div className="form-check ms-2 text-start">
                <input
                  className="form-check-input"
                  type="checkbox"
                  id={item.id}
                  {...register(`selectedRole.${item.id}`, { 
                    value: initialRoles[item.id] || false 
                  })}
              
                />
                <label className="form-check-label text-bold" htmlFor={item.id}><small>{item.role || "--"}</small></label>
              </div>
            </div>
            
          
        ))}

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

export default ManageRole;


