import React, { useState, useEffect } from 'react';
import RoleBadge from './RoleBadge';
import Avatar from '../common/Avatar';

const AssignEmployeeCard = ({
  employee,
  jobRoles,
  isChecked,
  onRoleChange,
  onCheckboxChange,
}) => {
  const [currentJobRole, setCurrentJobRole] = useState(employee.jobRoleId);

  useEffect(() => {
    setCurrentJobRole(employee.jobRoleId);
  }, [employee.jobRoleId]);

  const handleRoleChange = (newRoleId) => {
    setCurrentJobRole(newRoleId);
    onRoleChange(employee.id, newRoleId);
  };

  const handleCheckboxChange = () => {
    if (!employee.isActive) {
      onCheckboxChange(employee.id); 
    }
  };

  return (
    <div className="assign-employee-card d-flex justify-content-between align-items-center px-2 py-1 border-bottom">
      <div className="d-flex align-items-center flex-grow-1">
        <div className="avatar me-3">
         
          <Avatar firstName={employee.firstName} lastName={employee.l} />
        </div>
        <div className="employee-info">
          <p className="mb-0  d-none d-sm-block">{employee.firstName} {employee.lastName} </p>
        </div>
      </div>

      <div className="d-flex align-items-center">
        <RoleBadge
          JobRoles={jobRoles}
          currentJobRole={currentJobRole}
          onRoleChange={handleRoleChange}
        />
        <input
          className="form-check-input ms-3"
          type="checkbox"
          checked={isChecked}
          disabled={employee.isActive} 
          onChange={handleCheckboxChange}
        />
      </div>
    </div>
  );
};

export default AssignEmployeeCard;