FINAL-PROJECT-FRONT/src/components/HomePage/LeftBar/index.tsx

import React, { useState, useRef, useEffect } from 'react';
import { createPortal } from 'react-dom';

import Grid from '@mui/material/Grid'
import SmallMenuBar from './SmallMenuBar'
import SearchLists from './SearchLists';
import SearchBar from './SearchBar'
import ChatsList from './ChatsList'
import MenuBar from './MenuBar'
import ContactsList from './ContactsList'
import AddContact from './AddContact'
import NotDone from '../../reusableComponents/NotDone'

const LeftBar = () => {
  const [isOpen, setIsOpen] = useState<boolean>(false)
  const [isMenu, setIsMenu] = useState<boolean>(false)
  const [isMenuSm, setIsMenuSm] = useState<boolean>(false);
  const [iMenu, setIMenu] = useState<number | null>(null)
  const [value, setValue] = useState<string>('')
  const modalRoot = useRef<HTMLDivElement|null>(null);
  const handleFocus = (): void => setIsOpen(true)
  const handleClick = (): void => {
  setValue('')
  if (iMenu) setIMenu(null)
  if(!isOpen) return setIsMenu(!isMenu)
     setIsOpen(false)
  }
  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>):void => setValue(e.target.value)
  const handleEnterOpenMenuSm = (): void => {
  if(!isMenuSm) setIsMenuSm(true)
  }
  const handleLeaveCloseMenuSm = (e: any): void => {
  if(isMenuSm&&e.pageX > 480) setIsMenuSm(false)
  }
  const handleSelectedMenu = (i: number) => {
    setIsOpen(true)
    setIsMenu(false)
    setIsMenuSm(false)
    setValue('')
    setIMenu(i)
  }
  
  useEffect(() => {
    const handleCloseModal = (e:any) => {
      if (e.target.id === 'overlay') {
        setIsMenu(false)
        setIsMenuSm(false)
      }
    }
    if (!modalRoot.current) {
    const modal = document.getElementById('modal-root') as HTMLDivElement | null
      if (modal) {
      modal.addEventListener('click',handleCloseModal)
      modalRoot.current = modal
       }     
    }
    return () => {
      if (modalRoot.current) {
      modalRoot.current.removeEventListener('click',handleCloseModal)
      modalRoot.current = null        
      }
    }
  }, [])

    return (
      <Grid item lg={3} onMouseEnter={handleEnterOpenMenuSm} onMouseLeave={handleLeaveCloseMenuSm}>
        <SearchBar handleClick={handleClick} handleFocus={handleFocus}
          handleSearch={handleSearch} isOpen={isOpen} iMenu={iMenu} value={value}/>
        {!iMenu&&isOpen && <SearchLists />}
        {!iMenu&&!isOpen &&<ChatsList/>}
        {!iMenu && isMenuSm && !isOpen && <SmallMenuBar handleSelectedMenu={handleSelectedMenu}
          setIsMenuSm={setIsMenuSm} />}
        {isMenu && modalRoot.current &&
          createPortal(<MenuBar handleSelectedMenu={handleSelectedMenu} />, modalRoot.current)}
        {iMenu === 0 && <NotDone name='Saved Messages' />}
        {iMenu === 1 && <NotDone name='Archive Chats' />}
        {iMenu === 2 && <ContactsList value={value}/>}
        {iMenu === 3 && <NotDone name='Settings' />}
        {iMenu === 4 && <NotDone name='Night Mode' />}
        {iMenu === 5 && <NotDone name='Animations' />}
        {iMenu === 6 && <NotDone name='Telegram Feature' />}
        {iMenu === 7 && <NotDone name='Report Bag' />}
        {iMenu === 8 && <NotDone name='Switch to K Version' />}
        {iMenu === 9 && <NotDone name='Switch to Old Version' />}
        {iMenu === 10 && <NotDone name='Telegram WebZ 1.33.4' />}
        {iMenu === 11 && <ChatsList />}
        {iMenu === 12 && <AddContact setIMenu={setIMenu}/>}
    </Grid>
    )
}

export default LeftBar