import React, { useState } from 'react'
import { Outlet } from 'react-router-dom'
import { Box, useMediaQuery } from '@mui/material'
import { useSelector } from 'react-redux'
import Navbar from 'components/Navbar'
import Sidebar from 'components/Sidebar'
import { useGetUserQuery } from 'state/api'





const Layout = () => {
    const nonMobile = useMediaQuery("(min-width: 600px)");
    const [sidebarOpen, setSidebarOpen] = useState(true);
    const userId = useSelector((state) => state.global.userId);
    const { data } = useGetUserQuery(userId); 

  return (
    <Box  display={nonMobile ? "flex" : "block"} width="100%" height="100%">
        <Sidebar user={data || {}} nonMobile = {nonMobile} drawerWidth = "250px" sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
        <Box flexGrow={1}>
            <Navbar user={data || {}} sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen}/>
            <Outlet />
        </Box>
    </Box>
  )
}

export default Layout