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 { 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: {
    cursor: 'pointer',
    marginBottom: 30,
    position: 'relative',
  },
  imgDropZoneOverlay: {
    position: 'absolute',
    width: 120,
    height: 120,
    borderRadius: '50%',
    backgroundColor: '#6868687d',
    left: 0,
    zIndex: 1,
    display: 'flex',
    justifyContent: 'center',
    alignContent: 'center',
    alignItems:'center'
  },
  addPhoto: {
    color: '#ffffff',
    transform: 'scale(1.1)',
    '&:hover': {
      transform: 'scale(1.3)',
    },
  },
  avatarArrow: {
    cursor: 'pointer',
    alignSelf: 'flex-end',
    '&:hover': {
      backgroundColor: 'rgb(62, 149, 231)'
    }
  }
})

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

const EditList = (props: IEditList) => {
  const classes = useStyles()
  const { user, name, setName, lastName, setLastName,
    openBtn, setOpenBtn,setFile } = 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;
    }
  }

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

  return (
    <div className={classes.container} >     
      <ListItemAvatar className={classes.imgWrapper}>
        <div {...getRootProps({ className: classes.imgDropZoneOverlay })}>
          <AddAPhotoIcon className={classes.addPhoto} fontSize='large' />
          <input {...getInputProps()}/>
        </div>
         <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
           sx={{ background: color, width: 120, height: 120}}>
           {`${firstLetter(name)}${firstLetter(lastName)}`}
         </Avatar>
      </ListItemAvatar>
      <Webcam
        audio={false}
        height={300}
        screenshotFormat="image/jpeg"
        width={300}
        videoConstraints={videoConstraints}
      >
        {({ getScreenshot }) => (
          <button onClick={() => {
            setFile(getScreenshot())
            !openBtn&&setOpenBtn(true)
          }}>
            Capture photo
          </button>)}
      </Webcam>          
      <TextField
        id="name"
        name='name'
        label="Name"
        value={name}
        fullWidth
        variant='outlined'
        onChange={handleTextField}
        style={{marginBottom:20}}
        />
      <TextField
        id="lastName"
        name='lastName'
        label="LastName"
        value={lastName}
        fullWidth
        variant='outlined'
        onChange={handleTextField}
      />        
    </div>
  )
};

export default EditList;