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

import { useState, useRef, useEffect } from 'react';
import { useSelector } from 'react-redux';
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 SettingsBar from './SettingsBar';
import EditBar from './EditBar';
import { getState } from '../../../redux/authorization/selector'

const LeftBar = () => {
  const { sort,nightMode } = useSelector(getState)
  const [isSearch, setIsSearch] = useState<boolean>(false)
  const [isMenu, setIsMenu] = useState<boolean>(false)
  const [isMenuSm, setIsMenuSm] = useState<boolean>(false);
  const [selectedIndex, setSelectedIndex] = useState<number | null>(null)
  const [value, setValue] = useState<string>('')
  const [date, setDate] = useState<any>('');
  const modalRoot = useRef<HTMLDivElement|null>(null);
  const handleFocus = (): void => setIsSearch(true)
  const handleClick = (): void => {
    value&&setValue('')
    date&&setDate('')
    if (selectedIndex) setSelectedIndex(null)
    if(!isSearch) return setIsMenu(!isMenu)
    setIsSearch(false)
  }
  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>):void => setValue(e.target.value)
  const handleEnterOpenMenuSm = (): void => {
    if(!isMenuSm) setIsMenuSm(true)
  }
  const handleLeaveCloseMenuSm = (): void => {
    if(isMenuSm) setIsMenuSm(false)
  }
  const handleSelectedMenu = (i: number) => {
    setIsSearch(true)
    setIsMenu(false)
    setIsMenuSm(false)
    value&&setValue('')
    date&&setDate('')
    setSelectedIndex(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} style={{ position: 'relative', backgroundColor:'#ffffff'}}
        onMouseEnter={handleEnterOpenMenuSm} onMouseLeave={handleLeaveCloseMenuSm}>
        {selectedIndex !== 2 && selectedIndex !== 3 && selectedIndex !== 4 &&
          <SearchBar handleClick={handleClick} handleFocus={handleFocus} sort={sort} 
            handleSearch={handleSearch} isSearch={isSearch}
            value={value} setDate={setDate} date={date}/>}
        {!selectedIndex && isSearch && <SearchLists value={value} setValue={setValue}
          sort={sort} date={date} setDate={setDate}/>}
        {!selectedIndex&&!isSearch &&<ChatsList sort={sort} date={date} value={value}/>}
        {!selectedIndex && isMenuSm && !isSearch && <SmallMenuBar
          handleSelectedMenu={handleSelectedMenu} setIsMenuSm={setIsMenuSm} />}
        {isMenu && modalRoot.current &&
          createPortal(<MenuBar handleSelectedMenu={handleSelectedMenu} nightMode={nightMode}/>, modalRoot.current)}
        {selectedIndex === 1 && <ContactsList handleClick={handleClick} value={value} sort={sort} date={date}/>}
        {selectedIndex === 2 && <SettingsBar setSelectedIndex={setSelectedIndex} handleClick={handleClick}/>}
        {selectedIndex === 3 && <AddContact setSelectedIndex={setSelectedIndex} handleClick={handleClick}/>}
        {selectedIndex === 4 && <EditBar setSelectedIndex={setSelectedIndex}/>}
    </Grid>
    )
}

export default LeftBar