import ListItemButton from '@mui/material/ListItemButton';
import Avatar from '@mui/material/Avatar';
import ListItemText from '@mui/material/ListItemText';
import ListItemIcon from '@mui/material/ListItemIcon';
import { useDispatch, useSelector } from 'react-redux';

import { actionRightIsOpen } from '../../../../../redux/control/action'
import { getChat } from '../../../../../redux/chat/selector'
import { firstLetter,slicedWord,timeStampEU,prodAwsS3 } from '../../../../../helpers'

const Credentials = () => {
  const dispatch = useDispatch()
  const { name, lastName, avatarUrl, color, online } = useSelector(getChat)
  
  return (
    <ListItemButton onClick={() => dispatch(actionRightIsOpen('credentials'))}>
      <ListItemIcon >
        <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
              sx={{ background: color, width: 44, height: 44 }}>
              {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
        </Avatar>
      </ListItemIcon> 
      <ListItemText primary={`${firstLetter(name)}${slicedWord(name, 15, 1)}
        ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
        secondaryTypographyProps={{ color: '#0379af' }} secondary={online === 'true' ?
          'online' : `last seen ${timeStampEU(online)}`} />
    </ListItemButton>
  )
}

export default Credentials