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

import ImageList from '@mui/material/ImageList';
import { makeStyles } from '@material-ui/core'
import { useEffect } from 'react';

import MediaListItem from './MediaListItem';
import AlertInfo from '../../../../reusableComponents/AlertInfo';
import { filteredMessages,handleSort } from '../../../../../helpers'
import { TAllMessages } from '../../../../../typescript/redux/allMessages/types'

const useStyles = makeStyles({
  container: {
    width: '100%',
    maxHeight: '86vh',
    overflowY: 'scroll',
  '&::-webkit-scrollbar': {
    width: '0.4em'
  },
  '&::-webkit-scrollbar-track': {
    boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
    webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
    backgroundColor: '#eceeec',
  },
  '&::-webkit-scrollbar-thumb': {
    backgroundColor: '#ccc8c8',
    },
  "&::-webkit-scrollbar-thumb:focus": {
    backgroundColor: "#959595",
          },
  "&::-webkit-scrollbar-thumb:active": {
    backgroundColor: "#959595",
    },
  },  
})

interface IMediaList {
  messagesMemo: TAllMessages,
  value: string,
  date: any,
  setDisabled: React.Dispatch<boolean>,
  sort: boolean,
  handleScrollToTheMessage:(_id:string,companionId:string)  => void
}

const MediaList = ({ messagesMemo,value,date,sort,setDisabled,handleScrollToTheMessage }: IMediaList) => {
  const classes = useStyles()
  const filtered =  messagesMemo.filter(({type}) => type === 'image')
  const filteredAndSorted = filteredMessages(handleSort('createdAt', filtered, sort), date, value)
  
  useEffect(() => {
    setDisabled(filtered.length > 0?false:true)
  }, [filtered, setDisabled])
  
  return (
    <>
      {filteredAndSorted.length > 0 &&
        <ImageList className={classes.container} cols={3} rowHeight={164}>
        {filteredAndSorted.map(({message,createdAt,fullType,updatedAt,_id,companionId}) => 
          <MediaListItem key={createdAt} message={message} fullType={fullType}
            updatedAt={updatedAt} handleScrollToTheMessage={handleScrollToTheMessage} id={_id} companionId={companionId}/>)}
      </ImageList>}
      {(value || date) &&  filteredAndSorted.length === 0 && <AlertInfo name={`Can not find Media by request: ${value}`} />}
      {!value && !date && filteredAndSorted.length === 0 && <AlertInfo name='You do not have Media yet!'/>}
     </>
   )
}

export default MediaList