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

interface CreateClassesProps {
  /**
   * The side on which sidebar the button will be on.
   */
  side: 'left' | 'right';
  /**
   * Enables a special `locked` style.
   */
  locked?: boolean;
  /**
   * Enables a special MediaQuery fow check page width.
   */
  isMdUp?: boolean;
  /**
   * Enables a special MediaQuery fow check page width.
   */
  isSmUp?: boolean;
  isRightSideBar?: boolean;
  open?: boolean;
  hideHeader?: boolean;
}

const createClasses = makeStyles<Theme, CreateClassesProps>(theme => ({
  button: props => {
    const { locked, isRightSideBar, open } = props;

    return {
      width: theme.spacing(3),
      minWidth: theme.spacing(3),
      padding: 0,
      height: theme.spacing(3),
      borderRadius: theme.spacing(1.5),
      backgroundColor: theme.palette.common.white,
      fill: theme.palette.primary[400],
      border: `1px solid ${theme.palette.primary[200]}`,
      '& .injected-svg': {
        width: theme.spacing(2),
        transition: theme.transitions.create('transform', {
          easing: theme.transitions.easing.sharp,
          duration: theme.transitions.duration.enteringScreen
        }),
        transform: !isRightSideBar && (open || locked) ? 'rotate(90deg)' : 'rotate(270deg)'
      },
      '&:focus': {
        backgroundColor: theme.palette.common.white
      },
      '&:hover': {
        transition: 'none',
        backgroundColor: 'transparent'
      },
      '& > span': {
        width: theme.spacing(3)
      }
    };
  },
  container: props => {
    const { side, hideHeader } = props;
    return {
      zIndex: 1,
      display: 'flex',
      justifyContent: `flex-${side === 'left' ? 'start' : 'end'}`,
      position: 'absolute',
      [side === 'left' ? 'right' : 'left']: theme.spacing(side === 'left' ? -2.75 : -2.875),
      top: theme.spacing(side === 'left' && !hideHeader ? 9 : 1),
      width: theme.spacing(4.25),
      color: 'transparent',
      '&:hover > div': {
        width: theme.spacing(4.25),
        transition: theme.transitions.create('width', {
          easing: theme.transitions.easing.sharp,
          duration: theme.transitions.duration.enteringScreen
        })
      },
      '&:hover > button': {
        width: theme.spacing(4.25),
        backgroundColor: theme.palette.secondary[500],
        border: 'none',
        fill: theme.palette.common.white,
        transition: 'none'
      }
    };
  },
  animation: props => {
    const { side } = props;
    return {
      position: 'absolute',
      [side === 'left' ? 'left' : 'right']: 0,
      top: 0,
      height: theme.spacing(3),
      minWidth: theme.spacing(3),
      borderRadius: theme.spacing(1.5),
      backgroundColor: theme.palette.secondary[500],
      zIndex: -1,
      '&:hover': {
        width: theme.spacing(4.25)
      }
    };
  }
}));

export default createClasses;
export type { CreateClassesProps };