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 { getState } from '../../../redux/controlApp/selector'

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

const RightBar = () => {
  const classes = useStyles()
  const {isOpen,companion:{number}} = useSelector(getState)
    return number?(
      <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