FINAL-PROJECT-FRONT/src/components/HomePage/RightBar/CredentialsList/ProfileLists/index.tsx

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

import AudioList from './AudioList';
import MediaList from './MediaList';
import FilesList from './FilesList';
import TextList from './TextList';
import VideoList from './VideoList'
import { getMessagesMemo } from '../../../../../redux/messages/selector'
import { handleSort } from '../../../../../helpers';
import { getChat } from '../../../../../redux/chat/selector'
import { TMessages } from '../../../../../typescript/redux/messages/types'

const useStyles = makeStyles({
container: {
  borderBottom: 'solid 2px #dddddd',
  display: 'flex',
  justifyContent: 'space-around',
  alignContent: "center",
  alignItems:"center",
  flexWrap: 'nowrap',
  height:'7vh',
  color:'rgba(0, 0, 0, 0.6)'
  },
  item: {
    height:'100%',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignContent: "center",
    alignItems: "center",
    cursor:'pointer',
  },
icon: {
  fontSize: '1rem',
  lineHeight: 0,
  marginBottom: 0,
  fontWeight:600
 },
underline: {
  fontSize: '2.5rem',
  lineHeight: 0,
  },
})

const ProfileLists = ({setDisabled,chatDivRef}:{setDisabled: React.Dispatch<boolean>,chatDivRef: any | null}) => {
    const classes = useStyles()
    const { sort } = useSelector(getChat)
    const messagesMemo = useSelector(getMessagesMemo)
    const [isActive, setIsActive] = useState<number>(0)
    const handleIsActive = (newValue: number): void => setIsActive(newValue)
    const handleScrollToTheMessage = (_id: string) => {
      const childNodes = chatDivRef.current.childNodes[0].childNodes
      let toScrollNode = [...childNodes].find((el: any) => el.id === _id)
      if (toScrollNode) {
        toScrollNode = [...toScrollNode.childNodes].slice(-1)[0]
        toScrollNode.style.boxShadow = '0px 0px 6px 0px #555555'
        toScrollNode.scrollIntoView({ behavior: 'smooth' })
        setTimeout(() => {
          toScrollNode.style.boxShadow = 'unset'
        }, 2000)
      }
    }
    const filterBy = ['text', 'image', 'text', 'audio', 'video']
  
    const sorted: TMessages = handleSort('createdAt', messagesMemo, sort)
    const filteredAndSorted = sorted.filter((el) => {
      if (isActive !== 0) {
        if(el.type === filterBy[isActive]) return el
      } else {
        if(el.type !== filterBy[isActive]) return el
      }
    })
  
    useEffect(() => {
      setDisabled(filteredAndSorted.length > 0?false:true)
    }, [filteredAndSorted, setDisabled])
  
    return (
    <>
        <div className={classes.container}>
          <div className={classes.item} style={{color:isActive === 0?'#1976d2':"rgba(0, 0, 0, 0.6)"}}
            onClick={() => handleIsActive(0)}>
            <span className={classes.icon}>Files</span>
            <span className={classes.underline}>___</span>
          </div>
          <div className={classes.item} style={{color:isActive === 1?'#1976d2':"rgba(0, 0, 0, 0.6)"}}
            onClick={() => handleIsActive(1)}>
            <span className={classes.icon}>Media</span>
            <span className={classes.underline}>___</span>
          </div>
          <div className={classes.item} style={{color:isActive === 2?'#1976d2':"rgba(0, 0, 0, 0.6)"}}
            onClick={() => handleIsActive(2)}>
            <span className={classes.icon}>Text</span>
            <span className={classes.underline}>___</span>
          </div>
          <div className={classes.item} style={{color:isActive === 3?'#1976d2':"rgba(0, 0, 0, 0.6)"}}
            onClick={() => handleIsActive(3)}>
            <span className={classes.icon}>Audio</span>
            <span className={classes.underline}>___</span>
          </div>
          <div className={classes.item} style={{color:isActive === 4?'#1976d2':"rgba(0, 0, 0, 0.6)"}}
            onClick={() => handleIsActive(4)}>
            <span className={classes.icon}>Video</span>
            <span className={classes.underline}>___</span>
          </div>
      </div>
            {isActive === 0 && <FilesList filteredAndSorted={filteredAndSorted} handleScrollToTheMessage={handleScrollToTheMessage}/>}            
            {isActive === 1 && <MediaList filteredAndSorted={filteredAndSorted} handleScrollToTheMessage={handleScrollToTheMessage}/>}
            {isActive === 2 && <TextList filteredAndSorted={filteredAndSorted} handleScrollToTheMessage={handleScrollToTheMessage}/>}
            {isActive === 3 && <AudioList filteredAndSorted={filteredAndSorted} handleScrollToTheMessage={handleScrollToTheMessage}/>}
            {isActive === 4 && <VideoList filteredAndSorted={filteredAndSorted} handleScrollToTheMessage={handleScrollToTheMessage}/>}
    </>      
    )
}

export default ProfileLists