import SpaceToolbar from 'components/SpaceToolbar';
import React, { FC, MouseEventHandler } from 'react';
import styled from 'styled-components';

import { Divider, Drawer, DrawerProps, Hidden } from '@material-ui/core';

type DrawerWidthProp = {
  drawerWidth: number;
};
type NavDrawerProps = {
  onClose: MouseEventHandler;
  open: boolean;
} & DrawerWidthProp;

const Nav = styled.nav<DrawerWidthProp>`
  ${({ theme }) => theme.breakpoints.up('sm')} {
    width: ${({ drawerWidth }) => drawerWidth}px;
    flex-shrink: 0;
  }
`;

const FilteredDrawer = ({
  drawerWidth,
  ...props
}: DrawerProps & DrawerWidthProp) => <Drawer {...props} />;

const StyledDrawer = styled(FilteredDrawer)<DrawerWidthProp>`
  & .app-drawer-paper {
    width: ${({ drawerWidth }) => drawerWidth}px;
  }
`;
const NavDrawer: FC<NavDrawerProps> = ({
  onClose,
  open,
  drawerWidth,
  children,
}) => {
  const drawer = (
    <div>
      <SpaceToolbar />
      <Divider />
      {children}
    </div>
  );
  return (
    <Nav aria-label="menu" drawerWidth={drawerWidth}>
      <Hidden smUp implementation="js">
        <StyledDrawer
          variant="temporary"
          anchor="left"
          open={open}
          onClose={onClose}
          drawerWidth={drawerWidth}
          ModalProps={{ keepMounted: true }}
          classes={{ paper: 'app-drawer-paper' }}
        >
          {drawer}
        </StyledDrawer>
      </Hidden>
      <Hidden xsDown implementation="js">
        <StyledDrawer
          variant="permanent"
          classes={{ paper: 'app-drawer-paper' }}
          drawerWidth={drawerWidth}
          open
        >
          {drawer}
        </StyledDrawer>
      </Hidden>
    </Nav>
  );
};

export default NavDrawer;