FINAL-PROJECT-FRONT/src/components/HomePage/CentralBar/ChatBar/SendMessage/ForwardSearchList/index.tsx

import { makeStyles } from '@material-ui/core'
import { useState } from 'react'
import { useSelector,useDispatch } from 'react-redux'

import ForwardSearch from './ForwardSearch'
import ForwardList from './ForwardList'
import { asyncGetChatById } from '../../../../../../redux/chat/operations'
import { actionRightIsOpen,actionScrollChat,actionOpenPinned } from '../../../../../../redux/control/action'
import { getStateMemo } from '../../../../../../redux/chats/selector'
import { TMessage } from '../../../../../../typescript/redux/messages/types'

const useStyles = makeStyles({
  overlay: {
    position: 'fixed',
    top: 0,
    left: 0,
    width: '100vw',
    height: '100vh',
    zIndex: 100,
    backgroundColor: 'rgba(104, 105, 104, 0.6)',
    overflowY: 'hidden',
  },  
  container: {
    backgroundColor: 'white',
    width: '22vw',
    position: 'absolute',
    top: '15vh',
    height:'70vh',
    left: '39vw',
    display: 'flex',
    flexWrap: 'wrap',
    alignItems: 'start',
    alignContent:'start',
    borderRadius:10,
  }
})

interface IForwardSearchList {
  setModalForward: React.Dispatch<React.SetStateAction<boolean>>,
  setIsForward: React.Dispatch<React.SetStateAction<TMessage | undefined>>,
  companionId: string,
}
const ForwardSearchList = ({setModalForward,setIsForward,companionId}:IForwardSearchList) => {
  const classes = useStyles()
  const dispatch = useDispatch()
  const { total,chats } = useSelector(getStateMemo)
  const [value, setValue] = useState<string>('')
  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>): void => setValue(e.target.value)
  const handleCloseForwardModal = (e: any) => {
    const id = e.target.id
    if (id === 'overlay' || id === 'cancel') {
      setModalForward(false)
      setIsForward(undefined)
    }
  }
  const handleListItemClick = (newCompanionId: string) => {
    setModalForward(false)
    dispatch(actionRightIsOpen(''))
    dispatch(actionOpenPinned(false))
    dispatch(asyncGetChatById(newCompanionId))
    if (companionId !== newCompanionId) {
      setIsForward((prevState) => prevState?{...prevState,companionId:newCompanionId}:prevState
      )
      setTimeout(() => dispatch(actionScrollChat(true)), 500)
    }
  }

  return (
    <div onClick={handleCloseForwardModal} className={classes.overlay} id='overlay'>
      <div className={classes.container}>
        <ForwardSearch handleSearch={handleSearch} value={value} total={total}/>
        <ForwardList value={value} chats={chats} total={total} handleListItemClick={handleListItemClick}/>
      </div>
    </div>
  )
}

export default ForwardSearchList