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 LibraryMusicIcon from '@mui/icons-material/LibraryMusic';
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 IAudioList {
  openPinned: boolean,
  filteredAndSorted: TMessages,
  handleScrollToTheMessage: (_id:string) => void,
}

const AudioList = ({ filteredAndSorted,handleScrollToTheMessage,openPinned }: IAudioList) => {
  const classes = useStyles()
  
    return filteredAndSorted.length > 0 ?(
      <List className={classes.container}>
        {filteredAndSorted.map(({ message, createdAt, fullType,_id,name,avatarUrl,lastName,color }) =>
          <div key={createdAt}>
            <ListItem onClick={() => handleScrollToTheMessage(_id)}
              alignItems="flex-start" className={classes.listItem}>
              <ListItemAvatar>
                <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
                  sx={{ background: color, width: 40, height: 40, marginRight:2 }}>
                {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
                </Avatar>
              </ListItemAvatar>
              <ListItemText
                primary={fullType}
                secondary={timeStampEU(createdAt)}
              />
              <LibraryMusicIcon className={classes.folderIcon} fontSize='large'/>            
            </ListItem>
            <Divider variant="inset"/>
        </div>)}
    </List>
   ): <AlertInfo name={`You do not have ${openPinned&&'Pinned'} Audio yet!`}/>  
}

export default AudioList