import React from 'react'

const getEmailIcon = (type) => {
  switch (type) {
    case 'work': return "bx bx-briefcase me-1 " ;
    case 'personal': return "bx bx-user me-1";
    case 'support': return "bxr headphone-mic me-1";
    case 'billing': return "bx bx-receipt me-1";
    default: return "bx bx-envelope me-1";
  }
};

const getPhoneIcon = (type) => {
  switch (type) {
    case 'business': return "bx bx-briefcase me-1 ";
    case 'home': return "bx bx-mobile me-1 ";
    case 'personal': return "bx bx-user me-1 ";
    case 'landline': return "bx bx-phone me-1 ";
    case 'fax': return "bx bx-printer me-1";
    case 'whatsapp': return "bxl-whatsapp me-1";
    case 'emergency': return "bx bx-error-circle me-1";
    default: return "bx bx-phone me-1";
  }
};

const ListViewDirectory = ({ contact,setSelectedContact,setIsOpenModal }) => {
  return (
    <tr key={contact.id} >
      <td className="text-start" colSpan={2}>{`${contact.name}`}</td>

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

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


      <td className="text-start">{contact.organization}</td>

  
      <td>
        <div className="d-flex flex-column align-items-start">
          <span class="badge badge-outline-primary">{contact?.contactCategory?.name }</span>
        </div>
      </td>

      {/* Actions */}
      <td className="align-middle text-center ">
        <i className='bx bx-edit bx-sm text-primary cursor-pointer' onClick={() =>
        {
          setSelectedContact( contact )
          setIsOpenModal(true)
        }}></i>
         <i className='bx bx-trash bx-sm text-danger cursor-pointer'></i>
      </td>
    </tr>
  );
};

export default ListViewDirectory;