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

const useStyles = makeStyles({
  container: {
    minHeight: '100vh',
    maxHeight: '100vh',
    background: 'linear-gradient(to bottom right, #e7f097 , #b1e667,#f4f75e)',
    paddingBottom:158,
  },
  chat: {
    width: "100%",
    height: "100%",
    display: "flex",
    flexWrap: 'nowrap',
    alignItems: "center",
    justifyContent: 'center',
  },
  moveChat: {
    marginLeft:506
  },
  containerBtn: {
    minHeight: '100vh',
    maxHeight: '100vh',
    background: 'linear-gradient(to bottom right, #e7f097 , #b1e667,#f4f75e)',
    display: 'flex',
    msFlexDirection: 'column',
    alignContent: 'center',
    alignItems: 'center',
    justifyContent:'center'
  }
})

const RightBar = () => {
  const classes = useStyles()
  const isOpen = useSelector(getIsOpen)
  const {_id} = useSelector(getChat)
    return _id?
      <Grid item lg={9} className={classes.container}>
        <HeaderBar />
        <div className={classes.chat}>
          <ChatBar />
          {isOpen&&isOpen !== 'menu'&&<div className={classes.moveChat}></div>}
        </div>
      </Grid>
     : <Grid item lg={9} className={classes.container}/>
}

export default RightBar