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


const useStyles = makeStyles({
  container: {
    minHeight: '100vh',
    maxHeight: '100vh',
  },
  centralAndRight: {
    display:'flex'
  },
  centralBar: {
    background: 'linear-gradient(to bottom right, #e7f097 , #b1e667,#f4f75e)',
  },  
})

const HomePage = () => {
  const classes = useStyles()
  const rightIsOpen = useSelector(getRightIsOpen)
  const { companionId } = useSelector(getChatMemo)
 
return (
    <Grid className={classes.container} container spacing={0} >
      <LeftBar />
      {companionId ?
      <Grid item lg={9} className={classes.centralAndRight}>
        <CentralBar rightIsOpen={rightIsOpen}/>
        <RightBar rightIsOpen={rightIsOpen}/>
      </Grid> :
      <Grid item lg={9} className={classes.centralBar}/>}
    </Grid>
    )
}

export default HomePage