import Grid from '@mui/material/Grid'
import { makeStyles } from '@material-ui/core'
import { useSelector } from 'react-redux'
import { useRef } from 'react'
import LeftBar from './LeftBar'
import CentralBar from './CentralBar'
import RightBar from './RightBar'
import { getRightIsOpen } from '../../redux/control/selector'
import { getChatMemo } from '../../redux/chat/selector'
import { getNightMode } from '../../redux/authorization/selector'
import wallpaper from '../../img/wallpaper.jpg'
import wallpaperNight from '../../img/wallpaperNight.jpg'


const useStyles = makeStyles({
  container: {
    minHeight: '100vh',
    maxHeight: '100vh',
  },
  centralAndRight: {
    display:'flex'
  },
})

const HomePage = () => {
  const classes = useStyles()
  const rightIsOpen = useSelector(getRightIsOpen)
  const chatDivRef = useRef<any | null>(null)
  const nightMode = useSelector(getNightMode)
  const { companionId } = useSelector(getChatMemo)
  const backgroundImage =  `url(${nightMode ? wallpaperNight : wallpaper})`
 
return (
    <Grid className={classes.container} container spacing={0} >
      <LeftBar chatDivRef={chatDivRef} />
      {companionId ?
      <Grid item lg={9} className={classes.centralAndRight}>
        <CentralBar rightIsOpen={rightIsOpen} chatDivRef={chatDivRef}
          companionId={companionId} backgroundImage={backgroundImage}/>
        <RightBar rightIsOpen={rightIsOpen} chatDivRef={chatDivRef} />
      </Grid> :
      <Grid item lg={9} style={{backgroundImage}}/>}
    </Grid>
    )
}

export default HomePage