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

import { useState, useRef, useEffect } from 'react';
import { useSelector,useDispatch } 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 { getAuthorizationState } from '../../../redux/authorization/selector';
import { getLeftIsOpen } from '../../../redux/control/selector';
import { actionLeftIsOpen } from '../../../redux/control/action';

const LeftBar = () => {
  const dispatch = useDispatch()
  const { sort, nightMode } = useSelector(getAuthorizationState)
  const leftIsOpen = useSelector(getLeftIsOpen)
  const [modal, setModal] = useState<boolean>(false)
  const [popup, setPopup] = useState<boolean>(false);
  const [disabled, setDisabled] = useState<boolean>(false)
  const [value, setValue] = useState<string>('')
  const [date, setDate] = useState<any>('');
  const modalRoot = useRef<HTMLDivElement | null>(null);
  
  const handleOpenIsSearch = () => leftIsOpen===''&&dispatch(actionLeftIsOpen('searchChats'))
  
  const handleClick = () => {
    dispatch(actionLeftIsOpen(''))
    setModal(true)
  }
  
  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>):void => setValue(e.target.value)
  const handleEnterOpenMenuSm = () => !popup&&setPopup(true)
  
  const handleLeaveCloseMenuSm = () => popup&&setPopup(false)
  

  useEffect(() => {
    setValue('')
    setDate('')    
    setModal(false)
    setPopup(false)
  },[leftIsOpen])
  
  useEffect(() => {
    const handleCloseModal = (e:any) => {
      if (e.target.id === 'overlay') {
        setModal(false)
        setPopup(false)
      }
    }
    if (!modalRoot.current) {
    const modalHtml = document.getElementById('modal-root') as HTMLDivElement | null
      if (modalHtml) {
        modalHtml.addEventListener('click',handleCloseModal)
        modalRoot.current = modalHtml
       }     
    }
    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}>
        {leftIsOpen === '' || leftIsOpen === 'contacts'
          || leftIsOpen === 'searchChats' || leftIsOpen === 'searchAllMessages' ?
        <SearchBar handleClick={handleClick} handleOpenIsSearch={handleOpenIsSearch} sort={sort} 
            handleSearch={handleSearch} leftIsOpen={leftIsOpen} value={value} setDate={setDate}
            date={date} disabled={disabled}/>:null}
        {leftIsOpen === 'searchChats' || leftIsOpen === 'searchAllMessages' ?<SearchLists value={value} setValue={setValue}
          sort={sort} date={date} setDate={setDate} setDisabled={setDisabled}/>:null}
        {leftIsOpen === ''&&<ChatsList sort={sort}/>}
        {leftIsOpen === '' && popup && <SmallMenuBar setPopup={setPopup} />}
        {modal && modalRoot.current &&
          createPortal(<MenuBar nightMode={nightMode} />, modalRoot.current)}
        {leftIsOpen === 'contacts' && <ContactsList handleClick={handleClick} value={value}
          sort={sort} date={date} setDisabled={setDisabled} />}
        {leftIsOpen === 'contact' && <AddContact  handleClick={handleClick}/>}
        {leftIsOpen === 'settings' && <SettingsBar handleClick={handleClick}/>}
        {leftIsOpen === 'edit' && <EditBar/>}
    </Grid>
    )
}

export default LeftBar