FINAL-PROJECT-FRONT/src/components/HomePage/CentralBar/HeaderBar/index.tsx

import Toolbar from '@mui/material/Toolbar'
import AppBar from '@mui/material/AppBar';
import { makeStyles,Typography } from '@material-ui/core'
import Button from '@mui/material/Button';
import { useState } from 'react';
import { useSelector,useDispatch } from 'react-redux';
import IconButton from '@mui/material/IconButton';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import Credentials from './Credentials'
import Buttons from './Buttons'
import PinnedBar from './PinnedBar';
import { removeSelectedMessagesById } from '../../../../api-data';
import { getChatMemo } from '../../../../redux/chat/selector';
import { actionRightIsOpen,actionOpenPinned } from '../../../../redux/control/action';
import { TPinnedMessages } from '../../../../typescript/redux/pinnedMessages/types'; 

const useStyles = makeStyles({
  toolBar: {
    color: '#6e6d6d',
    display: 'flex',
    justifyContent: 'space-between',
    backgroundColor: '#ffffff',
    height:'7vh'
  },
  toolBarPinned: {
    color: '#6e6d6d',
    display: 'flex',
    alignItems: 'center',
    alignContent:'center',
    backgroundColor: '#ffffff',
    height: '7vh',
    cursor:'pointer'
  },
  pinnedBack: {
    display: 'flex',
    width:'100%',
    alignContent: 'center',
    alignItems: 'center',
    flexWrap: 'nowrap',
  },  
  credentials: {
    background: '#fdfdfd',
    width:'100%',
    height: '100%',
    margin:'0 auto'
  },  
  toolBarRight: {
    display: 'flex',
  },   
  buttonDelete: {
    color: '#f8f8f8',
    backgroundColor:'#1d74c5',
  },
  modalDelete: {
    background: '#ffffff',
    position: 'absolute',
    content:'',
    width: '20%',
    height:'auto',
    left: '40%',
    bottom: '48.5%',
    borderRadius: 10,
    padding: 10,
    display: 'flex',
    flexDirection:'column'
  },  
  overlay: {
    position: 'fixed',
    top: 0,
    left: 0,
    width: '100vw',
    height: '100vh',
    zIndex: 100,
    backgroundColor: 'rgba(104, 105, 104, 0.6)',
    overflowY: 'hidden',
  },
  iconArrow: {
    '&:hover': {
      transform: 'rotate(360deg)',
      transition: 'all 250ms ease-out ',
    }
  },
})

interface IHeaderBar {
  chatDivRef: any | null,
  selectedArr: string[] | [],
  isSomeSelected: boolean,
  setIsSomeSelected: React.Dispatch<React.SetStateAction<boolean>>,
  handleClearSelect: () => void,
  openPinned: boolean,
  pinnedMessagesMemo: TPinnedMessages,
  socket:any
}

const HeaderBar = ({chatDivRef,selectedArr,isSomeSelected,setIsSomeSelected,handleClearSelect,openPinned,pinnedMessagesMemo,socket}:IHeaderBar) => {
  const classes = useStyles()
  const dispatch = useDispatch()
  const { companionId } = useSelector(getChatMemo)
  const [modal, setModal] = useState<boolean>(false)
  const handleClosePinned = (e: any) => {
    e.stopPropagation()
    dispatch(actionOpenPinned(false))
  }
  const handleOpenPinned = () => dispatch(actionOpenPinned(true))
  const handleOpenCredentials = (e: any) => {
    e.stopPropagation()
    dispatch(actionRightIsOpen('credentials'))
  }
  const handleOpenModal = (): void => setModal(true)
  const handleDeleteModal = (e: any) => {
    const id = e.target.id
    if (id === 'overlay') return setModal(false)
    if (id === 'cancel') {
      handleClearSelect()
      setModal(false)
    }
    if (id === 'delete') {
      removeSelectedMessagesById(companionId,selectedArr)
      handleClearSelect()
      setModal(false)
    }
  }    

  return (<>
    {!isSomeSelected&&openPinned &&pinnedMessagesMemo.length > 0&&
      <AppBar position="static">
        <Toolbar className={classes.toolBarPinned}>
          <div onClick={handleOpenCredentials}  className={classes.pinnedBack}>
            <IconButton onClick={handleClosePinned}
               aria-label="delete" size="medium">
               <ArrowBackIcon className={classes.iconArrow} fontSize='medium'/>
            </IconButton>
            <Typography style={{ marginLeft:20, color: '#474747'}} variant="h6" color="initial">
              {`${pinnedMessagesMemo.length} pinned messages`}
            </Typography>
          </div>
          <Buttons setIsSomeSelected={setIsSomeSelected} socket={socket} />
       </Toolbar>
     </AppBar>}
    {!openPinned && !isSomeSelected &&
      <AppBar position="static">
        <Toolbar className={classes.toolBar}>
          <Credentials/>
          <div className={classes.toolBarRight}>
            <PinnedBar chatDivRef={chatDivRef} handleOpenPinned={handleOpenPinned}/>
            <Buttons setIsSomeSelected={setIsSomeSelected} socket={socket}/>
          </div>
        </Toolbar>
      </AppBar>} 
    {isSomeSelected &&
      <AppBar position="static">
        <Toolbar className={classes.toolBar}>
          <Button color='primary' onClick={handleOpenModal}
            variant="contained" className={classes.buttonDelete}
            style={{visibility: selectedArr.length === 0 ? 'hidden' : 'visible',
              fontWeight:500}}>
            {`DELETE ${selectedArr.length}`}
          </Button>
          <Button onClick={handleClearSelect} style={{color:'#1d74c5',fontWeight:500}}>
            CANCEL
          </Button>
        </Toolbar>
        {modal &&
        <div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
          <div className={classes.modalDelete}>
            <h3 style={{color: '#2c2c2c'}}>Delete messages</h3>
            <p style={{ color: '#050505' }}>Are you sure you want to delete messages?</p>
            <Button id='delete' variant="text" color="error" style={{fontWeight:500,fontSize:22}}>
              DELETE MESSAGES
            </Button>         
            <Button id='cancel' variant="text" style={{fontWeight:500,fontSize:22}}>
               CANCEL
            </Button>
          </div>  
        </div>}         
      </AppBar>}
    </>
    )
}

export default HeaderBar