FINAL-PROJECT-FRONT/src/components/HomePage/LeftBar/EditBar/EditList/index.tsx

import { makeStyles, TextField } from '@material-ui/core'
import ListItemAvatar from '@mui/material/ListItemAvatar';
import Avatar from '@mui/material/Avatar';
import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
import PhotoCameraFrontIcon from '@mui/icons-material/PhotoCameraFront';
import CameraIcon from '@mui/icons-material/Camera';
import { useEffect } from 'react';
import { useDropzone } from 'react-dropzone';
import Webcam from "react-webcam";
import { format,firstLetter,prodAwsS3 } from '../../../../../helpers'
import { IAuthorizationState } from '../../../../../typescript/redux/authorization/interfaces'

const useStyles = makeStyles({
  container: {
    display: 'flex',
    alignItems: 'center',
    alignContent:'center',
    flexDirection: 'column',
    width: '100%',
    padding: 20,
    paddingTop:0,
    position: 'relative',
    backgroundColor: '#ffffff',
  },
  imgWrapper: {
    marginBottom: 30,
    width: '100%',
    display: 'flex',
    flexWrap: 'nowrap',
    alignItems: 'center',
    alignContent: 'center',
    flexDirection: 'row',
    justifyContent:'center'
  },
  overlay: {
    position: 'fixed',
    top: 0,
    left: 0,
    width: '100vw',
    height: '100vh',
    zIndex: 100,
    backgroundColor: 'rgba(104, 105, 104, 0.6)',
    overflowY: 'hidden',
    display: 'flex',
    justifyContent: 'center',
    alignContent: 'center',
    alignItems: 'center',
    flexDirection:'column'
  },
  capturedPicture: {
    borderRadius: 10,
    border:'solid 2px rgb(62, 149, 231)'
  },  
  capturePhoto: {
    color: '#ffffff',
    cursor: 'pointer',
    '&:hover': {
      color: '#48ff00',
      animation: `$rotating 2s linear infinite`
    },
  },  
  '@keyframes rotating': {
	  'from': { transform: 'rotate(0deg)'},
	  'to': { transform: 'rotate(360deg)'},
   },  
})

interface IEditList {
  user: IAuthorizationState,
  name: string,
  setName: any,
  lastName: string,
  setLastName: any,
  openBtn: boolean,
  setOpenBtn: any,
  file:any,
  setFile: (file: any) => void,
  camera: boolean,
  setCamera: any,
  selfie:any,
  setSelfie: (file: any) => void,
}

const EditList = (props: IEditList) => {
  const classes = useStyles()
  const { user, name, setName, lastName, setLastName,
    openBtn, setOpenBtn,file,setFile,camera,setCamera,selfie,setSelfie } = props
  const { avatarUrl, color } = user
  const { getRootProps, getInputProps, acceptedFiles } = useDropzone({
        noDrag: true,
        accept:'image/*'
  });
  
  const videoConstraints = {
    width: 1280,
    height: 720,
    facingMode: "user"
  };

  const handleTextField = (e: React.ChangeEvent<HTMLInputElement>) => {
  !openBtn&&setOpenBtn(true)
  const value = format(e.target.value)
  const name = e.target.name
    switch (name) {
      case 'name':
        setName(value)
        break;
      case 'lastName':
        setLastName(value)
        break;
      default:
        break;
    }
  }

  const handleOpenCamera = () => {
    setCamera(true)
    file&&setFile(null)
  }

  const handleCloseCamera = (e: any) => {
    const id = e.target.id
    if (id === 'overlay') setCamera(false)
  }

  useEffect(() => {
    if (acceptedFiles.slice(-1)[0]) {
      setFile(acceptedFiles.slice(-1)[0])
      setSelfie(false)
      setOpenBtn(true)
    }
  }, [setFile,setSelfie,setOpenBtn,acceptedFiles])

  return (
    <div className={classes.container}>
      <div className={classes.imgWrapper}>
        <div {...getRootProps()}>
          <AddAPhotoIcon fontSize='large'
            sx={{color: file ? 'rgb(62, 149, 231)' : '#6b6b6b',
            '&:hover': { color: 'rgb(41, 139, 231)' },cursor:'pointer'}} />
          <input {...getInputProps()}/>
        </div>
        <ListItemAvatar style={{margin:'0px 20px'}}>
          <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
           sx={{ background: color, width: 120, height: 120,fontSize:30}}>
           {`${firstLetter(name)}${firstLetter(lastName)}`}
          </Avatar>
        </ListItemAvatar>
        <PhotoCameraFrontIcon onClick={handleOpenCamera} fontSize='large'
          sx={{color: selfie ? 'rgb(62, 149, 231)' : '#6b6b6b',
          '&:hover': { color: 'rgb(41, 139, 231)' },cursor:'pointer'}}/>
      </div>
      {camera &&
      <div onClick={handleCloseCamera} id='overlay'
        className={classes.overlay}>
        <Webcam
        audio={false}
        screenshotFormat="image/jpeg"
        width='40%'
        videoConstraints={videoConstraints}
        style={{marginBottom:30}}
      >
          {({ getScreenshot }) => <>
            <CameraIcon onClick={() => {
              setSelfie(getScreenshot())
              setOpenBtn(true)
            }}
              className={classes.capturePhoto} fontSize='large' style={{marginBottom:30}} />
            <img className={classes.capturedPicture} width='300' height='174'
              style={{visibility:selfie?'visible':'hidden'}} src={selfie} alt='chosen pic'></img>
          </>}
        </Webcam>
      </div>}
      <TextField
        id="name"
        name='name'
        label="Name"
        value={name}
        fullWidth
        variant='outlined'
        onChange={handleTextField}
        style={{marginBottom:30}}
        />
      <TextField
        id="lastName"
        name='lastName'
        label="LastName"
        value={lastName}
        fullWidth
        variant='outlined'
        onChange={handleTextField}
      />        
    </div>
  )
};

export default EditList;