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 { TAllMessages } from '../../../../../typescript/redux/allMessages/types'

const useStyles = makeStyles({
  container: {
    width: '100%',
    maxHeight: '88vh',
    overflowY: 'scroll',
    position: 'absolute',
    animationDuration: '0.2s',
    animationDirection: 'normal',
    animation: `$moveElement`,       
  '&::-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",
    },
  },   
  folderIcon: {
    margin: 'auto 0px',
    color: '#54b0fc',
  },
  listItem: {
    cursor:'pointer',
    '&:hover': {
      backgroundColor: '#f0f0f0',
    }
  },
  '@keyframes moveElement': {
   '0%': { left: '-100%'},
   '100%': { left: '0%'},
  },    
})

interface IVideoList {
  filteredAndSortedMessages: TAllMessages,
  value: string,
  date: any,
  handleScrollToTheMessage:(_id:string,companionId:string)  => void
}

const VideoList = ({ filteredAndSortedMessages,value,date,handleScrollToTheMessage }: IVideoList) => {
  const classes = useStyles()

  return (
    <>
      {filteredAndSortedMessages.length > 0 &&
        <List className={classes.container}>
        {filteredAndSortedMessages.map(({ createdAt, fullType,_id,companionId,name,avatarUrl,lastName,color }) =>
          <div key={createdAt}>
            <ListItem onClick={() => handleScrollToTheMessage(_id,companionId)}
              key={createdAt} alignItems="flex-start" className={classes.listItem}>
              <ListItemAvatar>
                <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
                  sx={{ background: color, width: 40, height: 40}}>
                  {`${firstLetter(name)}${firstLetter(lastName)}`}
                </Avatar>
              </ListItemAvatar>               
              <ListItemText
                primary={fullType}
                secondary={timeStampEU(createdAt)}
              />
              <VideoLibraryIcon className={classes.folderIcon} fontSize='large'/>            
            </ListItem>
            <Divider variant="inset" />
          </div>)}
      </List>}
      {(value || date)&&  filteredAndSortedMessages.length === 0 && <AlertInfo name={`Can not find Video by request: ${value}`} />}
      {!value && !date && filteredAndSortedMessages.length === 0 && <AlertInfo name='You do not have Video yet!'/>}
    </>
   )  
}

export default VideoList