import { useState, useRef, useEffect } from "react";
import { FaChevronDown } from "react-icons/fa";
import { Dropdown } from "../index.styled";
import useTranslation from "../../../../hooks/useTranslation.jsx";
import wordStore from "../../../../mc/wordStore.json";
const ChatDropdown = ({
  text,
  pinChat,
  openModal,
  deleteChatModal,
  ref,
  setIsBoxOneOpen,
  setIsBoxTwoOpen,
}) => {
  const { findText } = useTranslation(wordStore);
  const dropdownContainer = useRef(null);
  const handleClickOutside = (event) => {
    if (
      dropdownContainer.current &&
      !dropdownContainer.current.contains(event.target)
    ) {
      setIsBoxOneOpen(false);
      setIsBoxTwoOpen(false);
    }
  };
  useEffect(() => {
    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);
  return (
    <Dropdown ref={dropdownContainer}>
      <div className="more-options">
        <ul>
          <li onClick={pinChat}> {text}</li>
          <li onClick={openModal}>{findText("Report user")}</li>
          <li onClick={deleteChatModal}>{findText("Delete chat")}</li>
        </ul>
      </div>
    </Dropdown>
  );
};
export default ChatDropdown;
