import makeStyles from '@mui/styles/makeStyles';
import type { Theme } from '../@styles/theme-provider';
import { alpha } from '@mui/system';

export interface DrawerStyleProps {
  open: boolean | undefined;
}

const createClasses = makeStyles<Theme, DrawerStyleProps>(theme => ({
  root: {
    '& .MuiBackdrop-root': {
      backgroundColor: alpha(theme.palette.common.black, 0.5)
    }
  },
  paper: {
    position: 'fixed',
    top: 0,
    padding: theme.spacing(5, 4, 2, 4),
    borderRight: `1px solid ${theme.palette.primary[200]}`,
    minWidth: '400px' //384+16
  },
  rightDrawer: props => {
    const { open } = props;
    return {
      position: 'fixed',
      overflow: 'visible',
      whiteSpace: 'nowrap',
      top: 0,
      bottom: 0,
      height: '100vh',
      borderLeft: `1px solid ${theme.palette.primary[200]}`,
      width: '384px',
      padding: open === true ? theme.spacing(5, 4, 0, 4) : theme.spacing(5)
    };
  },
  rightButton: {
    position: 'fixed',
    zIndex: 99,
    backgroundColor: theme.palette.background.filters,
    right: -5,
    top: theme.spacing(10.25),
    fill: theme.palette.primary[400],
    height: theme.spacing(5),
    borderRadius: theme.spacing(2.5, 0, 0, 2.5),
    '&:hover': {
      transform: 'translateX(-5px)',
      transition: 'transform 0.5s linear ',
      boxShadow: theme.shadows[1],
      background: theme.palette.background.filters,
      border: `${theme.spacing(0.125)} solid ${theme.palette.common.white}`,
      borderRight: 'none'
    },
    '& .injected-svg': {
      width: theme.spacing(2),
      height: theme.spacing(2),
      transform: 'rotate(90deg)'
    },
    '&.MuiButton-root': {
      padding: 0,
      minWidth: theme.spacing(4.1)
    }
  },
  closeIcon: {
    cursor: 'pointer',
    position: 'absolute',
    top: '46px',
    right: '36px'
  },
  secondaryDrawer: {}
}));

export default createClasses;