import { DrawerHeader } from './DrawerHeader';
import { MiniDrawerStyled } from './MiniDrawerStyled';
import { useLayoutDrawerState, useLayoutMediaState } from '@/components/Layout/Provider';
import { SimpleBar } from '@/components/third-party';
import { useSx } from '@/hooks';
import { Box, Drawer as MUIDrawer, SxProps, useTheme } from '@mui/material';
import { useMemo } from 'react';

type IDrawerProps = React.PropsWithChildren<{
  sx?: SxProps;
}>;

function Drawer(props: IDrawerProps): JSX.Element {
  const theme = useTheme();
  const sx = useSx(props, { flexShrink: { md: 0 }, zIndex: 1200 });
  const { downLg } = useLayoutMediaState();
  const { open, handleDrawerToggle, width } = useLayoutDrawerState();
  const Component = !downLg ? MiniDrawerStyled : MUIDrawer;
  const container = document.body;
  const ComponentProps = useMemo(() => {
    return !downLg
      ? { variant: 'permanent' }
      : {
          container: container,
          variant: 'temporary',
          onClose: handleDrawerToggle,
          ModalProps: { keepMounted: true },
          sx: {
            display: { xs: 'block', lg: 'none' },
            '& .MuiDrawer-paper': {
              boxSizing: 'border-box',
              width: width,
              borderRight: `1px solid ${theme.palette.divider}`,
              backgroundImage: 'none',
              boxShadow: 'inherit',
              overflow: 'auto'
            }
          }
        };
  }, [downLg, container, handleDrawerToggle, width, theme.palette.divider]);

  return (
    <Box component="nav" sx={sx} aria-label="mailbox folders">
      {/*@ts-ignore*/}
      <Component {...ComponentProps} open={open}>
        <DrawerHeader />
        <SimpleBar
          sx={{
            '& .simplebar-content': {
              display: 'flex',
              flexDirection: 'column'
            }
          }}
        >
          {props.children}
        </SimpleBar>
      </Component>
    </Box>
  );
}
export { Drawer };
export type { IDrawerProps };