import React, { useState, useRef, useEffect } from 'react';
import { MoreIcon } from '../../assets/svg/more';
import useRooms from '../../hooks/useRooms';
import Avatar from '../../assets/images/avatar.jpg';
import { HiUser, HiOfficeBuilding } from 'react-icons/hi';
import { FiMoreVertical } from 'react-icons/fi';
import MoreSvg from '../assets/more';
import { useNavigate } from 'react-router-dom';

/** The top green header of an open chat
 *
 */
import useTranslation from "../../../../hooks/useTranslation.jsx";
import wordStore from "../../../../mc/wordStore.json";
const ChatHeader = ({
  chatOptions,
  setChatOptions,
  openModal,
  chatRecipient,
  roomID,
  handleChangePinStatus,
  deleteChatModal,
  userFullName,
  courseName,
  accountType,
  userType,
  userAvatar,
}) => {
  const { findText } = useTranslation(wordStore);
  // handle click outside dropdown container
  const dropdownContainer = useRef(null);
  const handleClickOutside = (event) => {
    if (
      dropdownContainer.current &&
      !dropdownContainer.current.contains(event.target)
    ) {
      setChatOptions(false);
    }
  };
  useEffect(() => {
    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);

  // handle click outside dropdown container ends here

  return (
    <>
      <div className="friend-header-section">
        <div className="single-friend">
          <div className="avatar-profile">
            {/* <img src={userAvatar ? userAvatar : Avatar} alt="" /> */}
            <img
              src={
                !chatRecipient?.profile_picture
                  ? Avatar
                  : chatRecipient?.profile_picture?.url
              }
              alt=""
            />
            {chatRecipient?.is_online && <span className="online-dot"></span>}
          </div>
          <div className="user-details">
            <h5>{courseName || chatRecipient?.course}</h5>
            <div className="friend_cont">
              {/* <div className="friend-tag">
                <HiUser /> {userType}
               </div> */}

              {chatRecipient?.type === 'PERSONAL' && (
                <div className="friend-tag">
                  <HiUser />
                  {findText("Student")}
                </div>
              )}
              {chatRecipient?.type === 'INSTRUCTOR' && (
                <div className="instructor-tag">
                  <HiUser />
                  {findText("Instructor")}
                </div>
              )}
              {chatRecipient?.type === 'ENTERPRISE' && (
                <div className="enterprise-tag">
                  <HiOfficeBuilding />
                  {findText("Enterprise")}
                </div>
              )}

              <p> {chatRecipient?.full_name || userFullName}</p>
            </div>
          </div>
        </div>

        {/* <span onClick={() => setChatOptions(!chatOptions)}>
          <MoreSvg style={{ color: "#636666" }} />
         </span> */}

        {/* {chatOptions && (
          <div className="more-options" ref={dropdownContainer}>
            <ul>
              <li onClick={() => handleChangePinStatus(roomID, "room")}>
                {changePinStatusData?.data?.detail
                  ? changePinStatusData?.data?.detail === "True"
                    ? "Pin chat"
                    : "Unpin chat"
                  : "Pin chat"}
              </li>
              <li onClick={() => navigate(`/msg/${accountType}/messages`)}> Report User</li>
              <li onClick={deleteChatModal}> Delete chat</li>
            </ul>
          </div>
         )} */}
      </div>
    </>
  );
};
export default ChatHeader;
