import { useThemeConfig } from '@/components/Layout/ThemeProvider';
import { Drawer } from '@mui/material';
import { Theme, styled } from '@mui/material/styles';

function openedMixin(theme: Theme, drawerWidth: number) {
  return {
    width: drawerWidth,
    borderRight: `1px solid ${theme.palette.divider}`,
    transition: theme.transitions.create('width', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen
    }),
    overflowX: 'hidden',
    // @ts-ignore
    boxShadow: theme.palette.mode === 'dark' ? theme.customShadows.z1 : 'none'
  };
}

function closedMixin(theme: Theme) {
  return {
    transition: theme.transitions.create('width', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen
    }),
    overflowX: 'hidden',
    width: theme.spacing(7.5),
    borderRight: 'none',
    // @ts-ignore
    boxShadow: theme.customShadows.z1
  };
}
type MiniDrawerStyledProps = {
  open: boolean;
  theme: Theme;
};

const MiniDrawerStyled = styled(Drawer, { shouldForwardProp: (prop) => prop !== 'open' })(
  // @ts-ignore
  ({ theme, open }: MiniDrawerStyledProps) => {
    const { drawerWidth } = useThemeConfig();
    return {
      width: drawerWidth,
      flexShrink: 0,
      whiteSpace: 'nowrap',
      boxSizing: 'border-box',
      ...(open && {
        ...openedMixin(theme, drawerWidth),
        '& .MuiDrawer-paper': openedMixin(theme, drawerWidth)
      }),
      ...(!open && {
        ...closedMixin(theme),
        '& .MuiDrawer-paper': closedMixin(theme)
      })
    };
  }
);

export { MiniDrawerStyled };
export type { MiniDrawerStyledProps };