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

const CardViewDirectory = ({ contact, setSelectedContact, setIsOpenModal,setOpen_contact,setIsOpenModalNote }) => {
  return (
    <div className="card text-start border-1">
      <div className="card-body  px-1 py-2 pb-0">
        <div className="d-flex justify-content-between">
          <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>

        <ul className="list-inline m-0 ps-4">
          <li className="list-inline-item me-1" style={{fontSize:"10px"}}>
            <i className="bx bx-building bx-xs"></i>
          </li>
          <li className="list-inline-item" style={{fontSize:"10px"}}>
            {contact.organization}
          </li>
        </ul>
      </div>
      <div className="card-footer text-start px-1 py-1" onClick={() =>
      {
        setIsOpenModalNote(true)
        setOpen_contact(contact)
      }}>
        <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-merge bx-xs"></i>
          </li>
          <li className="list-inline-item small-text">
            {contact.contactCategory.name}
          </li>
        </ul>
      </div>
    </div>
  );
};

export default CardViewDirectory;