import { makeStyles } from '@material-ui/core'
import { firstLetter,slicedWord,timeStampEU } from '../../../../../../../helpers'
import { useSelector } from 'react-redux';
import { getChat } from '../../../../../../../redux/chat/selector'

const useStyles = makeStyles({
  container: {
    width:'100%'
  },
  imgContainer: {
    position:'relative',
    width: '100%',
    height: 468,
    color: '#ffffff',
    display: 'flex',
    justifyContent: 'center',
    alignContent: 'center',
    alignItems: 'center',
    fontSize: 200,
  },
  nameTile: {
    position:'absolute',
    color: '#ffffff',
    backgroundColor: '#6e6e6e7d',
    borderRadius: 10,
    padding:'0px 6px 2px 6px',
    fontWeight:600,
    fontSize: 24,
    zIndex:10,
    top: 395,
    left:35
  },
  timeTile: {
    position:'absolute',
    color: '#ffffff',
    backgroundColor:'#6e6e6e7d',
    borderRadius: 10,
    padding:'0px 6px 2px 6px',
    fontSize: 19,
    fontWeight:600,
    top: 430,
    left:35
  },    
})

const ProfilePicture = () => {
  const classes = useStyles()
  const  { name,lastName,avatarUrl,online,color }  = useSelector(getChat)
  return (
    <div className={classes.container}>
      {avatarUrl ? <img className={classes.imgContainer} width='488px' height='468px' alt='avatar'
        src={`http://localhost:3000/${avatarUrl}`}></img> :
        <div className={classes.imgContainer} style={{ background: `linear-gradient(${color} 75%, #4e4e4e)` }}>
        {`${firstLetter(name)}${firstLetter(lastName)}`}</div>}
      <span className={classes.nameTile}>{`${firstLetter(name)}${slicedWord(name, 15, 1)}
        ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}</span>
      <span className={classes.timeTile}>{online === 'true'?'online':`last seen ${timeStampEU(online)}`}</span>
    </div>
  )
}

export default ProfilePicture