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

const useStyles = makeStyles({
  container: {
    position: 'relative',
  },
  nameTile: {
    position:'absolute',
    color: '#ffffff',
    backgroundColor: 'rgb(0,0,0)',
    borderRadius: 10,
    padding:8,
    fontSize: 18,
    zIndex:10,
    top: '6%',
    left: '50%',    
    marginLeft: '-45%',
    opacity: 0.7,
    transition: 'opacity .35s ease-in-out'
  },
  timeTile: {
    position:'absolute',
    color: '#ffffff',
    backgroundColor: 'rgb(0,0,0)',
    borderRadius: 10,
    padding:4,
    fontSize: 15,
    top: '1%',
    left: '50%',    
    marginLeft: '-45%',
    opacity: 0.7,
    transition: 'opacity .35s ease-in-out'
  },    
})

const ProfilePicture = () => {
  const classes = useStyles()
  const { name, lastName, online, avatarsArr} = useSelector(getChat)
  return (
    <div className={classes.container}>
      <Carousel>
        {avatarsArr.map(({avatarUrl,updatedAt}) => <div>
              <img alt='pic' src={`${prodBaseURL}/${avatarUrl}`}/>
                <p className="legend">{timeStampEU(updatedAt)}</p>
            </div>)}
       </Carousel>      
      <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