import { Box } from '@mui/material'
import Container from '@mui/material/Container'
import { useEffect } from 'react'
import { useDispatch } from 'react-redux'
import { Outlet } from 'react-router-dom'
import { AppBar } from '../components/AppBar/AppBar'
import { restoreState } from '../store/actions'
import { loadState } from '../utils'

export const MainLayout = () => {
  const dispatch = useDispatch()

  useEffect(() => {
    const restoredState = loadState()
    if (restoredState) dispatch(restoreState(restoredState))
  }, [dispatch])

  return (
    <>
      <AppBar />

      <Box className='main'>
        <Container
          sx={{
            position: 'relative'
          }}
        >
          <Outlet />
        </Container>
      </Box>
    </>
  )
}