import MenuIcon from '@mui/icons-material/Menu'
import { Drawer, IconButton, 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 (
    <ErrorBoundary>
      {window.innerWidth > 1024 && !permissions.isHomePageEnabled && (
        <StyledLeftNavContainer>
          <SideNav menuItems={menu as any[]} header={sideMenuHeader} />
        </StyledLeftNavContainer>
      )}

      <StyledMainContentContainer
        style={{
          width: permissions.isHomePageEnabled
            ? 'inherit'
            : 'calc(100% - 220px)',
          position: permissions.isHomePageEnabled ? 'unset' : 'fixed',
          marginTop: permissions.isHomePageEnabled ? '10px' : '0px',
          borderRadius: permissions.isHomePageEnabled ? '10px' : '0px',
          border: permissions.isHomePageEnabled ? '1px solid #1212' : 'none',
          height: permissions.isHomePageEnabled
            ? 'calc(100vh - 74px)'
            : 'calc(100vh - 64px)',
        }}
      >
        {window.innerWidth < 1024 && (
          <>
            <IconButton
              color="inherit"
              aria-label="open drawer"
              onClick={handleDrawer}
              edge="start"
              sx={{ mr: 0.5 }}
            >
              <MenuIcon />
            </IconButton>
            {/* <Button
            onClick={() => {
              console.log('hi')
            }}
            // edge="start"
            // sx={{ mr: 0.5 }}
          >
            <MenuIcon />
          </Button> */}
            <StyledDrawer
              variant={'temporary'}
              anchor="left"
              open={open}
              onClose={handleDrawer}
            >
              <SideNav menuItems={menu as any[]} header={sideMenuHeader} />
            </StyledDrawer>
          </>
        )}
        <ErrorBoundary>{children}</ErrorBoundary>
      </StyledMainContentContainer>
    </ErrorBoundary>
  )
}

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',
    },
  },
}))
