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

import { makeStyles, TextField, Typography } from '@material-ui/core'
import ListItemAvatar from '@mui/material/ListItemAvatar';
import Avatar from '@mui/material/Avatar';
import Checkbox from '@mui/material/Checkbox';
import ListItemText from '@mui/material/ListItemText';
import { format,firstLetter,slicedWord,prodBaseURL } from '../../../../../../helpers'
import { TChat } from '../../../../../../typescript/redux/chat/types'

const useStyles = makeStyles({
  container: {
    display: 'flex',
    alignItems: 'center',
    alignContent:'center',
    flexDirection: 'column',
    width: '100%',
    margin: '0 auto',
    padding: 20,
    marginBottom:15,
    position: 'relative',
    backgroundColor: '#ffffff',
  },
  textField: {
    marginBottom:20
  },
  notifications: {
    width: '100%',
    display: 'flex',
    justifyContent: 'flex-start',
    alignContent: 'start',
    alignItems: 'start',
    marginBottom:'auto'
  },
  avatarArrow: {
    cursor: 'pointer',
    alignSelf: 'flex-end',
    '&:hover': {
      backgroundColor: 'rgb(62, 149, 231)'
    }
  }
})

const label = { inputProps: { 'aria-label': 'Checkbox demo' } };

interface IEditList {
  chat: TChat,
  name: string,
  setName: any,
  lastName: string,
  setLastName: any,
  mute: boolean,
  setMute: any,
  openBtn: boolean,
  setOpenBtn: any,  
}

const EditList = (props: IEditList) => {
  const classes = useStyles()
  const {chat,name,setName,lastName,setLastName,mute,setMute,openBtn,setOpenBtn} = props
  const { avatarUrl,color,originalName,originalLastName } = chat
  const handleNotifications = () => {
    setMute(!mute)
    !openBtn&&setOpenBtn(true)
  }
  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;
    }
  }
 
  return (
    <div className={classes.container} >     
      <ListItemAvatar style={{marginBottom:10}}>
         <Avatar alt={name} src={avatarUrl?`${prodBaseURL}/${avatarUrl}`:undefined}
           sx={{ background: color, width: 120, height: 120,marginRight:2}}>
           {`${firstLetter(name)}${firstLetter(lastName)}`}
         </Avatar>
      </ListItemAvatar>          
      <Typography style={{color: '#080808',fontSize:22,fontWeight:500}}>
        {`${firstLetter(originalName)}${slicedWord(originalName, 15, 1)} 
        ${firstLetter(originalLastName)}${slicedWord(originalLastName, 15, 1)}`}
      </Typography>
      <Typography style={{fontSize:17,marginBottom:20}}>original name</Typography>          
      <TextField
        id="name"
        name='name'
        label="Name"
        value={name}
        fullWidth
        variant='outlined'
        onChange={handleTextField}
        className={classes.textField}
        />
      <TextField
        id="lastName"
        name='lastName'
        label="LastName"
        value={lastName}
        fullWidth
        variant='outlined'
        onChange={handleTextField}
        className={classes.textField}
      />
      <div className={classes.notifications}>
        <Checkbox onChange={handleNotifications} {...label} checked={mute} style={{marginRight:20}} />
        <ListItemText primary="Notifications" primaryTypographyProps={{ color: "#0e0d0d" }}
          secondary={!mute ? 'Disabled':'Enabled'} />
      </div>        
    </div>
  )
};

export default EditList;