import Grid from '@mui/material/Grid'
import { makeStyles } from '@material-ui/core'
import { useSelector } from 'react-redux'
import { getIsOpen } from '../../../redux/control/selector'
import { getChatMemo } from '../../../redux/chat/selector'

import HeaderBar from './HeaderBar'
import ChatBar from './ChatBar'
import RightListsAndBars from './RightListsAndBars'


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

const RightBar = () => {
  const classes = useStyles()
  const isOpen = useSelector(getIsOpen)
  const { _id } = useSelector(getChatMemo)
  const handleIsOpen = isOpen&&isOpen !== 'menu'

    return _id?
      <Grid item lg={9} style={{display:'flex'}}>
        <Grid item lg={handleIsOpen?8:12}>
          <Grid item lg={12} >
            <HeaderBar/>
          </Grid>          
          <Grid item lg={12} className={classes.chatBar}>
            <ChatBar />
          </Grid>
        </Grid>
        <Grid item lg={handleIsOpen?4:0}>
          <RightListsAndBars/>
        </Grid>          
      </Grid>
     : <Grid item lg={9} className={classes.chatBar}/>
}

export default RightBar