import React from 'react'
import Avatar from '../common/Avatar';
import { getEmailIcon,getPhoneIcon } from './DirectoryUtils';


const ListViewDirectory = ({IsActive, contact,setSelectedContact,setIsOpenModal,setOpen_contact,setIsOpenModalNote,IsDeleted}) => {
  return (
   <tr className={!IsActive ? "bg-light" : ""}>
  <td className="text-start cursor-pointer" style={{ width: "18%" }} colSpan={2} onClick={() => {
    if (IsActive) {
      setIsOpenModalNote(true);
      setOpen_contact(contact);
    }
  }}>
    <div className="d-flex align-items-center">
      <Avatar
        size="xs"
        classAvatar="m-0"
        firstName={(contact?.name || "").trim().split(" ")[0]?.charAt(0) || ""}
        lastName={(contact?.name || "").trim().split(" ")[1]?.charAt(0) || ""}
      />
      <span className="text-truncate mx-0" style={{ maxWidth: "150px" }}>{contact?.name || ""}</span>
    </div>
  </td>

  <td className="px-2"  style={{ width: "20%" }}>
    <div className="d-flex flex-column align-items-start text-truncate">
      {contact.contactEmails?.map((email, index) => (
        <span key={email.id} className="text-truncate">
          <i className={getEmailIcon(email.label)} style={{ fontSize: "12px" }}></i>
          <a href={`mailto:${email.emailAddress}`} className="text-decoration-none ms-1">{email.emailAddress}</a>
        </span>
      ))}
    </div>
  </td>

  <td className="px-2" style={{ width: "20%" }}>
    <div className="d-flex flex-column align-items-start text-truncate">
      {contact.contactPhones?.map((phone, index) => (
        <span key={phone.id}>
          <i className={getPhoneIcon(phone.label)} style={{ fontSize: "12px" }}></i>
          <span className="ms-1">{phone.phoneNumber}</span>
        </span>
      ))}
    </div>
  </td>

  <td colSpan={2} className="text-start text-truncate px-2" style={{ width: "20%", maxWidth: "200px" }}>
    {contact.organization}
  </td>

  <td className="px-2" style={{ width: "10%" }}>
    <span className="badge badge-outline-secondary">
      {contact?.contactCategory?.name}
    </span>
  </td>

  {IsActive && (
    <td className="align-middle text-center" style={{ width: "12%" }}>
      <i className="bx bx-edit bx-sm text-primary cursor-pointer me-2"
        onClick={() => {
          setSelectedContact(contact);
          setIsOpenModal(true);
        }}></i>
      <i className="bx bx-trash bx-sm text-danger cursor-pointer"
        onClick={() => IsDeleted(contact.id)}></i>
    </td>
  )}
</tr>

  );
};

export default ListViewDirectory;