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 { conatProfile, loading } = useContactProfile(contact?.id);
  const [profileContact, setProfileContact] = useState();

  useEffect(() => {
    setProfileContact(conatProfile);
  }, [conatProfile]);
  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"
            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-2">
            <span className="m-0 fw-semibold">{contact?.name}</span>
            <span className="small">
              <i className="bx bx-building bx-xs"></i>{" "}
              {conatProfile?.organization}
            </span>
            <span className="small-text">Manager</span>
          </div>
        </div>
        <div className="row">
            <div className="col-12 col-md-6 d-flex flex-column text-start">
          {conatProfile?.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">
                  {conatProfile.contactEmails.map((email, idx) => (
                    <li className="list-inline-item me-3" key={idx}>
                      <i className="bx bx-envelope bx-xs me-1"></i>
                      {email.emailAddress}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          )}
          {conatProfile?.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">
                  {conatProfile?.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>
          )}

          {conatProfile?.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(conatProfile.createdAt).format("MMMM, DD YYYY")}
                  </li>
                </ul>
              </div>
            </div>
          )}
          </div>
          { conatProfile?.buckets?.length > 0 && 
                <div className="col-12 col-md-6 d-flex flex-column text-start">
              {conatProfile?.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">
                  {conatProfile.buckets.map((bucket) => (
                    <li className="list-inline-item me-2" key={bucket.id}>
                      <span class="badge bg-label-primary my-1">{ bucket.name}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          )}
           </div>
         }
       </div>

        <hr className="my-1" />
        <NotesDirectory
          isLoading={loading}
          contactProfile={profileContact}
          setProfileContact={setProfileContact}
        />
      </div>
    </div>
  );
};

export default ProfileContactDirectory;