import React from "react";
import Avatar from "../common/Avatar";
import { getBucketNameById } from "./DirectoryUtils";
import { useBuckets } from "../../hooks/useDirectory";
import { getPhoneIcon } from "./DirectoryUtils";
const CardViewDirectory = ({
  IsActive,
  contact,
  setSelectedContact,
  setIsOpenModal,
  setOpen_contact,
  setIsOpenModalNote,
  IsDeleted,
}) => {
  const { buckets } = useBuckets();
  return (
    <div
      className="card text-start border-1"
      style={{ background: `${!IsActive ? "#f8f6f6" : ""}` }}
    >
      <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 ${!IsActive && "d-none"}`}>
              <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"
                    onClick={() => IsDeleted(contact.id)}
                  >
                    <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={() => {
          if (IsActive) {
            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={` ${getPhoneIcon(
                  contact.contactPhones[0].label
                )} 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>

        <ul className="list-inline m-0">
          {contact.bucketIds.map((bucketId) => (
            <React.Fragment key={bucketId}>
              <li className="list-inline-item me-1">
                <i className="bx bx-pin bx-xs"></i>
              </li>
              <li className="list-inline-item small-text">
                {getBucketNameById(buckets, bucketId)}
              </li>
            </React.Fragment>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default CardViewDirectory;