import React, { useEffect, useState } from "react";
import { useContactProfile } from "../../hooks/useDirectory";
import Avatar from "../common/Avatar";
import moment from "moment";
import NotesDirectory from "./NotesDirectory";

const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
  const { contactProfile, loading, refetch } = useContactProfile(contact?.id);
  const [copiedIndex, setCopiedIndex] = useState(null);

  const [profileContact, setProfileContact] = useState();
  const [expanded, setExpanded] = useState(false);
  const description = contactProfile?.description || "";
  const limit = 100;

  const toggleReadMore = () => setExpanded(!expanded);

  const isLong = description.length > limit;
  const displayText = expanded
    ? description
    : description.slice(0, limit) + (isLong ? "..." : "");
  useEffect(() => {
    setProfileContact(contactProfile);
  }, [contactProfile]);
  const handleCopy = (email, index) => {
    navigator.clipboard.writeText(email);
    setCopiedIndex(index);
    setTimeout(() => setCopiedIndex(null), 2000); // Reset after 2 seconds
  };
  return (
    <div className="p-1">
      <div className="text-center m-0 p-0">
        <p className="fw-semibold fs-6 m-0">Contact Profile</p>
      </div>
      <div>
        <div className="d-flex align-items-center mb-2">
          <Avatar
            size="sm"
            classAvatar="m-0"
            firstName={
              (contact?.name || "").trim().split(" ")[0]?.charAt(0) || ""
            }
            lastName={
              (contact?.name || "").trim().split(" ")[1]?.charAt(0) || ""
            }
          />
          <div className="d-flex flex-column text-start ms-1">
            <span className="m-0 fw-semibold">{contact?.name}</span>
            <small className="text-secondary small-text">
              {contactProfile?.tags?.map((tag) => tag.name).join(" | ")}
            </small>
          </div>
        </div>
        <div className="row">
          <div className="col-12 col-md-6 d-flex flex-column text-start">
            {contactProfile?.contactEmails?.length > 0 && (
              <div className="d-flex mb-2">
                <div style={{ width: "100px", minWidth: "100px" }}>
                  <p className="m-0">Email:</p>
                </div>
                <div>
                  <ul className="list-inline mb-0">
                    {contactProfile.contactEmails.map((email, idx) => (
                      <li
                        className="list-inline-item me-3 d-flex align-items-center"
                        key={idx}
                      >
                        <i className="bx bx-envelope bx-xs me-1"></i>
                        <span className="me-2">{email.emailAddress}</span>
                        <i
                          className={`bx bx-copy cursor-pointer ${
                            copiedIndex === idx
                              ? "text-secondary"
                              : "text-primary"
                          }`}
                          title={copiedIndex === idx ? "Copied!" : "Copy Email"}
                          style={{ fontSize: "16px" }}
                          onClick={() => handleCopy(email.emailAddress, idx)}
                        ></i>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            )}

            {contactProfile?.contactPhones?.length > 0 && (
              <div className="d-flex mb-2">
                <div style={{ width: "100px", minWidth: "100px" }}>
                  <p className="m-0">Phone : </p>
                </div>
                <div>
                  <ul className="list-inline mb-0">
                    {contactProfile?.contactPhones.map((phone, idx) => (
                      <li className="list-inline-item me-3" key={idx}>
                        <i className="bx bx-phone bx-xs me-1"></i>
                        {phone.phoneNumber}
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            )}

            {contactProfile?.createdAt && (
              <div className="d-flex mb-2">
                <div style={{ width: "100px", minWidth: "100px" }}>
                  <p className="m-0">Created : </p>
                </div>
                <div>
                  <ul className="list-inline mb-0">
                    <li className="list-inline-item">
                      <i className="bx bx-calendar-week bx-xs me-1"></i>
                      {moment(contactProfile.createdAt).format("MMMM, DD YYYY")}
                    </li>
                  </ul>
                </div>
              </div>
            )}

            {contactProfile?.address && (
              <div className="d-flex mb-2">
                <div style={{ width: "100px", minWidth: "100px" }}>
                  <p className="m-0">Location : </p>
                </div>
                <div>
                  <ul className="list-inline mb-0">
                    <li className="list-inline-item">
                      <i className="bx bx-map bx-xs me-1"></i>
                      {contactProfile?.address}
                    </li>
                  </ul>
                </div>
              </div>
            )}
          </div>

          <div className="col-12 col-md-6 d-flex flex-column text-start">
            {contactProfile?.organization && (
              <div className="d-flex mb-2">
                <div style={{ width: "100px", minWidth: "100px" }}>
                  <p className="m-0">Orgnization : </p>
                </div>
                <div>
                  <ul className="list-inline mb-0">
                    <li className="list-inline-item">
                      <i className="fa-solid fa-briefcase me-2"></i>
                      {contactProfile.organization}
                    </li>
                  </ul>
                </div>
              </div>
            )}
            {contactProfile?.contactCategory && (
              <div className="d-flex mb-2">
                <div style={{ width: "100px", minWidth: "100px" }}>
                  <p className="m-0">Category : </p>
                </div>
                <div>
                  <ul className="list-inline mb-0">
                    <li className="list-inline-item">
                      <i className="bx bx-user bx-xs me-1"></i>
                      {contactProfile.contactCategory.name}
                    </li>
                  </ul>
                </div>
              </div>
            )}

            {contactProfile?.buckets?.length > 0 && (
              <div className="d-flex ">
                {contactProfile?.contactEmails?.length > 0 && (
                  <div className="d-flex mb-2 align-items-center">
                    <div style={{ width: "100px", minWidth: "100px" }}>
                      <p className="m-0">Buckets : </p>
                    </div>
                    <div>
                      <ul className="list-inline mb-0">
                        {contactProfile.buckets.map((bucket) => (
                          <li className="list-inline-item me-2" key={bucket.id}>
                            <span className="badge bg-label-primary my-1">
                              {bucket.name}
                            </span>
                          </li>
                        ))}
                      </ul>
                    </div>
                  </div>
                )}
              </div>
            )}
          </div>
        </div>
        {contactProfile?.projects?.length > 0 && (
          <div className="d-flex mb-2 align-items-start">
            <div style={{ minWidth: "100px" }}>
              <p className="m-0 text-start">Projects :</p>
            </div>
            <div className="text-start">
              <ul className="list-inline mb-0">
                {contactProfile.projects.map((project, index) => (
                  <li className="list-inline-item me-2" key={project.id}>
                    {project.name}
                    {index < contactProfile.projects.length - 1 && ","}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        )}

        <div className="p-3 alert alert-secondary text-small text-start rounded  muted">
          <small className="fw-130">
            {displayText}
            {isLong && (
              <span
                onClick={toggleReadMore}
                className="text-primary mx-1 cursor-pointer"
              >
                {expanded ? "Read less" : "Read more"}
              </span>
            )}
          </small>
        </div>
        <hr className="my-1" />
        <NotesDirectory
          refetchProfile={refetch}
          isLoading={loading}
          contactProfile={profileContact}
          setProfileContact={setProfileContact}
        />
      </div>
    </div>
  );
};

export default ProfileContactDirectory;