FINAL-PROJECT-FRONT/src/components/HomePage/RightBar/CredentialsList/ProfilePicture/index.tsx

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

const useStyles = makeStyles({
  container: {
    position: 'relative',
  },
  timeTitle: {
    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'
  },   
  nameTitle: {
    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'
  },
  countryTitle: {
    position:'absolute',
    color: '#ffffff',
    backgroundColor: 'rgb(0,0,0)',
    borderRadius: 10,
    padding:4,
    fontSize: 15,
    top: '13%',
    left: '50%',    
    marginLeft: '-45%',
    opacity: 0.7,
    transition: 'opacity .35s ease-in-out'
  },
  credentialsTitle: {
    position:'absolute',
    color: '#ffffff',
    fontSize: 100,
    top: '30%',
    left: '38%',
  },
  credentialsLowTitle: {
    position:'absolute',
    color: '#ffffff',
    fontSize: 25,
    top: '90%',
    left: '9%',
  },
})

const ProfilePicture = () => {
  const classes = useStyles()
  const { name, lastName, online, avatarsArr, createdAt, color, country } = useSelector(getChat)
  const isDefault = avatarsArr.length === 0 ? false: true
  return (
    <div className={classes.container}>
      <Carousel>
        {isDefault ?
          avatarsArr.map(({ avatarUrl, updatedAt }) => <div>
              <img alt='pic' src={`${prodAwsS3}/${avatarUrl}`}/>
                <p className="legend">{timeStampEU(updatedAt)}</p>
            </div>):
            [
            <div>
              <img alt='transparentPic' src={transparentPic}
                style={{ background: `linear-gradient(to bottom, ${color}, ${color} 80%, #5d5d5d 100%)` }} />
              <p className="legend">{timeStampEU(createdAt)}</p>
            </div>
          ]}
       </Carousel>      
      <span className={classes.timeTitle}>{online === 'true' ? 'online' : `last seen ${timeStampEU(online)}`}</span>
      <span className={classes.nameTitle}>{`${firstLetter(name)}${slicedWord(name, 15, 1)}
        ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}</span>
      <span className={classes.countryTitle}>{country}</span>
      {!isDefault&&<span className={classes.credentialsTitle}>{`${firstLetter(name)}${firstLetter(lastName)}`}</span>}
      {!isDefault&&<span className={classes.credentialsLowTitle}>{`${firstLetter(name)}${firstLetter(lastName)}`}</span>}
    </div>
  )
}

export default ProfilePicture