import Grid from '@mui/material/Grid'
import { makeStyles } from '@material-ui/core'
import { useState } from 'react'

import HeaderBar from './HeaderBar'
import ChatBar from './ChatBar'
import { TRightIsOpen } from '../../../typescript/redux/control/types'

const useStyles = makeStyles({
  chatBar: {
    background: 'linear-gradient(to bottom right, #e7f097 , #b1e667,#f4f75e)',
  },
})

const CentralBar = ({rightIsOpen}:{rightIsOpen:TRightIsOpen}) => {
  const classes = useStyles()
  const [selectedArr, setSelectedArr] = useState<string[] | []>([])
  const [isSomeSelected, setIsSomeSelected] = useState<boolean>(false)
  const handleClearSelect = () => {
    selectedArr.length > 0 &&setSelectedArr([])
    isSomeSelected&&setIsSomeSelected(false)
  }

    return ( 
     <Grid item lg={rightIsOpen?8:12}>
        <Grid item lg={12} >
          <HeaderBar selectedArr={selectedArr} isSomeSelected={isSomeSelected} handleClearSelect={handleClearSelect} setIsSomeSelected={setIsSomeSelected}/>
        </Grid>          
        <Grid item lg={12} className={classes.chatBar}>
          <ChatBar selectedArr={selectedArr} setSelectedArr={setSelectedArr} isSomeSelected={isSomeSelected} setIsSomeSelected={setIsSomeSelected}/>
        </Grid>
      </Grid>
    )   
}

export default CentralBar