import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import ListItemAvatar from '@mui/material/ListItemAvatar';
import Avatar from '@mui/material/Avatar';
import VideoLibraryIcon from '@mui/icons-material/VideoLibrary';
import Divider from '@mui/material/Divider';
import { makeStyles } from '@material-ui/core'
import AlertInfo from '../../../../../reusableComponents/AlertInfo';
import { timeStampEU,prodAwsS3,firstLetter } from '../../../../../../helpers'
import { TMessages } from '../../../../../../typescript/redux/messages/types'
const useStyles = makeStyles({
container: {
position: 'absolute',
animationDuration: '0.2s',
animationDirection: 'normal',
animation: `$moveElement`,
},
folderIcon: {
margin: 'auto 0px',
color: 'rgba(0, 0, 0, 0.5)',
},
listItem: {
cursor:'pointer',
'&:hover': {
backgroundColor: '#f0f0f0',
}
},
'@keyframes moveElement': {
'0%': { left: '100%'},
'100%': { left: '0%'},
},
})
interface IVideoList {
openPinned: boolean,
filteredAndSorted: TMessages,
handleScrollToTheMessage: (_id:string) => void,
}
const VideoList = ({ filteredAndSorted,handleScrollToTheMessage,openPinned }: IVideoList) => {
const classes = useStyles()
return filteredAndSorted.length > 0 ?(
{filteredAndSorted.map(({ message, createdAt, fullType,_id,name,avatarUrl,lastName,color }) =>
handleScrollToTheMessage(_id)}
key={createdAt} alignItems="flex-start" className={classes.listItem}>
{!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
)}
):
}
export default VideoList