FINAL-PROJECT-FRONT/src/components/HomePage/LeftBar/SettingsBar/SettingsPicture/index.tsx

import { makeStyles } from '@material-ui/core'
import { useSelector } from 'react-redux';
import { useState } from 'react';
import { getState } from '../../../../../redux/authorization/selector'
import { Carousel } from 'react-responsive-carousel';
import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
import Avatar from '@mui/material/Avatar';
import { firstLetter, slicedWord, timeStampEU } from '../../../../../helpers'
import DeleteModal from './DeleteModal';


const useStyles = makeStyles({
  container: {
    width: '100%',
    backgroundColor: '#ffffff',
    position:'relative',
  },
  nameTile: {
    position:'absolute',
    color: '#ffffff',
    backgroundColor: 'rgb(0,0,0)',
    borderRadius: 10,
    padding:8,
    fontSize: 18,
    zIndex:10,
    top: '7%',
    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'
  },
  iconDeleteWrapper: {
    position: 'absolute',
    top: '1%',
    right: '9%',
  },
  iconDelete: {
    '&:hover': {
      opacity: 1,
      color: '#fa0000',
      animation: `$shake 0.5s`,
    }
  },
  '@keyframes shake': {
  '0%': { transform: 'translate(0.5px, 0.5px) rotate(0deg)'},
  '10%': { transform: 'translate(-0.5px, -1px) rotate(-1deg)'},
  '20%': { transform: 'translate(-1.5px, 0px) rotate(1deg)'},
  '30%': { transform: 'translate(1.5px, 1px) rotate(0deg)'},
  '40%': { transform: 'translate(0.5px, -0.5px) rotate(1deg)'},
  '50%': { transform: 'translate(-0.5px, 1px) rotate(-1deg)'},
  '60%': { transform: 'translate(-1.5px, 0.5px) rotate(0deg)'},
  '70%': { transform: 'translate(1.5px, 0.5px) rotate(-1deg)'},
  '80%': { transform: 'translate(-0.5px, -0.5px) rotate(1deg)'},
  '90%': { transform: 'translate(0.5px, 1px) rotate(0deg)'},
  '100%': { transform: 'translate(0.5px, -1px) rotate(-1deg)'},
}  
})

const SettingsPicture = () => {
  const classes = useStyles()
  const { name, lastName, avatarsArr, online } = useSelector(getState)
  const [modal, setModal] = useState<boolean>(false);
  const [index, setIndex] = useState<number>(0);
  const handleClick = (): void => setModal(true)

  return (
  <div className={classes.container}>
    {modal &&
    <DeleteModal setModal={setModal} index={index} setIndex={setIndex}/>}
      <Carousel onChange={(i)=> setIndex(i)} selectedItem={index}>
        {avatarsArr.map(({ avatarUrl, updatedAt }) =>
          <div key={avatarUrl}>
            <img alt='pic' src={`http://localhost:3000/${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>
      {avatarsArr.length > 1 &&
       <div className={classes.iconDeleteWrapper}>
        <Avatar className={classes.iconDelete} onClick={handleClick}
          sx={{width: 36, height: 36, backgroundColor: 'rgb(0,0,0)',
          color: '#ffffff', opacity: 0.5,cursor:'pointer'}}>
          <DeleteOutlineIcon fontSize='medium'/>  
        </Avatar>     
      </div>}
  </div>
  )
}

export default SettingsPicture