import React, { useEffect } from "react";
import Avatar from "../common/Avatar";
import { getEmailIcon, getPhoneIcon } from "./DirectoryUtils";
import { useDir } from "../../Context/DireContext";

const ListViewDirectory = ({
  IsActive,
  contact,
  setSelectedContact,
  setIsOpenModal,
  setOpen_contact,
  setIsOpenModalNote,
  IsDeleted,
  restore,
}) => {
  const { dirActions, setDirActions } = useDir();

  // Get the first email and phone number if they exist
  const firstEmail = contact.contactEmails?.[0];
  const firstPhone = contact.contactPhones?.[0];

  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">
          {firstEmail ? (
            <span key={firstEmail.id} className="text-truncate">
              <i
                className={getEmailIcon(firstEmail.label)}
                style={{ fontSize: "12px" }}
              ></i>
              <a
                href={`mailto:${firstEmail.emailAddress}`}
                className="text-decoration-none ms-1"
              >
                {firstEmail.emailAddress}
              </a>
            </span>
          ) : (
            <span className="small-text m-0 px-2">NA</span>
          )}
        </div>
      </td>

      <td className="px-2" style={{ width: "20%" }}>
        <div className="d-flex flex-column align-items-start text-truncate">
          {firstPhone ? (
            <span key={firstPhone.id}>
              <i
                className={getPhoneIcon(firstPhone.label)}
                style={{ fontSize: "12px" }}
              ></i>
              <span className="ms-1">{firstPhone.phoneNumber}</span>
            </span>
          ) : (
            <span className="text-small m-0 px-2">NA</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="text-truncate">
          {contact?.contactCategory?.name || "Other"}
        </span>
      </td>

      <td className="align-middle text-center" style={{ width: "12%" }}>
        {IsActive && (
          <>
            <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>
          </>
        )}
        {!IsActive && (
          <i
            className={`bx ${
              dirActions.action && dirActions.id === contact.id
                ? "bx-loader-alt bx-spin"
                : "bx-recycle"
            } me-1 text-primary cursor-pointer`}
            title="Restore"
            onClick={() => {
              setDirActions({ action: false, id: contact.id });
              restore(contact.id);
            }}
          ></i>
        )}
      </td>
    </tr>
  );
};

export default ListViewDirectory;