import React from "react";
import Avatar from "../common/Avatar";

const CardViewDirectory = ({ contact,setSelectedContact , setIsOpenModal}) => {
  return (
    <div class="card text-start border-1">
      <div class="card-body d-flex justify-content-between px-1 py-2">
        <div className="d-flex align-items-center">
          <Avatar
            size="xs"
            firstName={
              (contact?.name || "").trim().split(" ")[0]?.charAt(0) || ""
            }
            lastName={
              (contact?.name || "").trim().split(" ")[1]?.charAt(0) || ""
            }
          />{" "}
          <p className="m-0">{contact.name}</p>
        </div>
        <div>
          <div className="dropdown z-2 ">
            <button
              type="button"
              className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
              data-bs-toggle="dropdown"
              aria-expanded="false"
            >
              <i
                className="bx bx-dots-vertical-rounded bx-sm text-muted p-0"
                data-bs-toggle="tooltip"
                data-bs-offset="0,8"
                data-bs-placement="top"
                data-bs-custom-class="tooltip-dark"
                title="More Action"
              ></i>
            </button>
            <ul className="dropdown-menu dropdown-menu-end w-auto">
              <li onClick={() =>
              {
                setSelectedContact(contact)
                setIsOpenModal(true)
              }}>
                <a className="dropdown-item px-2 py-0">
                  <i className="bx bx-pencil bx-xs me-2"></i>
                  <span className="align-left small-text">Modify</span>
                </a>
              </li>
              <li>
                <a className="dropdown-item  px-2 py-0">
                  <i className="bx bx-trash bx-xs me-2"></i>
                  <span className="align-left small-text">Delete</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="card-footer text-start px-1 py-1">
        <hr className="my-0" />
        {contact.contactEmails[0] && (
          <ul className="list-inline my-1 ">
            <li className="list-inline-item me-2">
              <i className="bx bx-envelope bx-xs"></i>
            </li>
            <li className="list-inline-item small-text">
              {contact.contactEmails[0]?.emailAddress}
            </li>
          </ul>
        )}

        {contact.contactPhones[0] && (
          <ul className="list-inline m-0">
            <li className="list-inline-item me-2">
              <i className="bx bx-phone bx-xs"></i>
            </li>
            <li className="list-inline-item small-text">
              {contact.contactPhones[0]?.phoneNumber}
            </li>
          </ul>
        )}

        <ul className="list-inline m-0">
          <li className="list-inline-item me-2">
            <i className="bx bx-building bx-xs"></i>
          </li>
          <li className="list-inline-item small-text">
            {contact.organization}
          </li>
          <li className="list-inline-item me-2">
            <i className="bx bx-merge bx-xs"></i>
          </li>
          <li className="list-inline-item small-text">
            {contact.contactCategory.name}
          </li>
        </ul>
      </div>
    </div>
  );
};

export default CardViewDirectory;