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 Divider from '@mui/material/Divider';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { makeStyles } from '@material-ui/core'

import AlertInfo from '../../../../../../../reusableComponents/AlertInfo';
import { timeStampEU,firstLetter,copied } from '../../../../../../../../helpers'
import { TMessages } from '../../../../../../../../typescript/redux/messages/types'

const useStyles = makeStyles({
  listItem: {
    '&:hover': {
      backgroundColor: '#f0f0f0',
    }
  },  
})

const TextList = ({ messagesMemo }: { messagesMemo: TMessages }) => {
  const classes = useStyles()
  const filteredMessagesMemo =  messagesMemo.filter(({type}) => type === 'text')
   return filteredMessagesMemo.length > 0 ?(
    <List>
       {filteredMessagesMemo.map(({ message, createdAt, lastName, name, color, avatarUrl }) =>
      <div key={createdAt}>
        <CopyToClipboard onCopy={() => copied()} text={message}>
          <ListItem alignItems="flex-start" className={classes.listItem}>
            <ListItemAvatar>
              <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
                  sx={{ background: color, width: 38, height: 38,marginRight:2}}>
                  {`${firstLetter(name)}${firstLetter(lastName)}`}
              </Avatar>
            </ListItemAvatar>
             <ListItemText style={{ wordBreak: 'break-word' }} primary={message}
               secondary={timeStampEU(createdAt)} secondaryTypographyProps={{color: '#020202',paddingTop:0.5}}
            />
          </ListItem>
        </CopyToClipboard>
          <Divider variant="inset" />
      </div>)}
    </List>
   ): <AlertInfo name='You do not have Text yet!'/>  
}

export default TextList