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

import ImageList from '@mui/material/ImageList';
import MediaListItem from './MediaListItem';
import { makeStyles } from '@material-ui/core'

import AlertInfo from '../../../../../reusableComponents/AlertInfo';
import { TMessages } from '../../../../../../typescript/redux/messages/types'

const useStyles = makeStyles({
  container: {
    position: 'absolute',
    animationDuration: '0.2s',
    animationDirection: 'normal',
    animation: `$moveElement`,
  },
  '@keyframes moveElement': {
   '0%': { left: '100%'},
   '100%': { left: '0%'},
  },   
})

interface IMediaList {
  openPinned: boolean,
  filteredAndSorted: TMessages,
  handleScrollToTheMessage: (_id:string) => void,
}

const MediaList = ({ filteredAndSorted,handleScrollToTheMessage,openPinned }: IMediaList) => {
  const classes = useStyles()

  return filteredAndSorted.length > 0 ?(
  <ImageList className={classes.container}
    sx={{ width: '100%', height: 'auto', overflow: 'hidden' }} cols={3} rowHeight={164}>
      {filteredAndSorted.map(({message,createdAt,fullType,updatedAt,_id,name,lastName,avatarUrl,color}) => 
        <MediaListItem key={createdAt} message={message} fullType={fullType}
          updatedAt={updatedAt} handleScrollToTheMessage={handleScrollToTheMessage} id={_id}
          name={name} lastName={lastName} avatarUrl={avatarUrl} color={color}/>)}
  </ImageList>
   ): <AlertInfo name={`You do not have ${openPinned&&'Pinned'} Media yet!`}/>  
}

export default MediaList