import { Drawer, Stack, styled } from '@mui/material'
import { useState } from 'react'
import {
  StyledLeftNavContainer,
  StyledMainContentContainer,
} from '../../layouts/Components/styles'
import { PermissionsStore } from '../../shared-state'
import ErrorBoundary from '../ErrorBoundary'
import SideNav from './SideNav'
interface Props {
  children?: React.ReactNode
  menu: any[]
  sideMenuHeader?: React.ReactNode
}

export default function LayoutWrapper({
  children,
  menu,
  sideMenuHeader,
}: Props) {
  const permissions = PermissionsStore.useState()

  const [open, setOpen] = useState<boolean>(false)

  const handleDrawer = () => {
    console.log('hi')
    setOpen(!open)
  }
  return (
    <Stack direction="row" width="100%" height="calc(100vh - 96px)">
      <StyledLeftNavContainer>
        <SideNav menuItems={menu as any[]} header={sideMenuHeader} />
      </StyledLeftNavContainer>
      <StyledMainContentContainer>
        <ErrorBoundary>{children}</ErrorBoundary>
      </StyledMainContentContainer>
    </Stack>
  )
}

const drawerWidth: number = 240

export const StyledDrawer = styled(Drawer)(() => ({
  width: drawerWidth,
  flexShrink: 0,
  '& .MuiDrawer-paper': {
    width: drawerWidth,
    boxSizing: 'border-box',
    position: 'unset',
    transition: 'none !important',
    borderRight: 'none !important',
    borderRadius: '5px',
  },
  ['@media (max-width: 1024px)']: {
    '& .MuiDrawer-paper': {
      borderRadius: '0px',
    },
  },
}))
