import { memo } from 'react';
import clsx from 'clsx';
import type { Theme } from '../../@styles/theme-provider';
import MuiDrawer from '@mui/material/Drawer';
import type { DrawerProps as MuiDrawerProps } from '@mui/material/Drawer';
import makeStyles from '@mui/styles/makeStyles';

export type DrawerProps = MuiDrawerProps;

const createClasses = makeStyles<Theme, { anchor: DrawerProps['anchor'] }>(theme => ({
  root: {
    '& .MuiBackdrop-root': {
      backgroundColor: 'unset'
    }
  },
  paper: props => {
    const { anchor } = props;

    return {
      width: `${theme.spacing(54)} !important`,
      padding: theme.spacing(5, 4, 2, 4),
      [`border${anchor === 'left' ? 'Right' : 'Left'}`]: `1px solid ${theme.palette.primary[200]}`,
      boxShadow: theme.shadows[11]
    };
  }
}));

export const Drawer = memo((props: DrawerProps) => {
  const { classes, ...rest } = props;
  const styles = createClasses({ anchor: rest.anchor });
  return (
    <MuiDrawer
      classes={{
        ...classes,
        root: clsx(styles.root, classes?.root),
        paper: clsx(styles.paper, classes?.paper)
      }}
      {...rest}
    />
  );
});