import { memo } from 'react';
import Grid from '@mui/material/Grid';
import Button from '@mui/material/Button';
import { ButtonProps } from '@mui/material/Button';
import Tooltip from '@mui/material/Tooltip';
import { ReactSVG } from 'react-svg';
import { useTheme } from '@mui/styles';
import createClasses from './styles';
import type { CreateClassesProps } from './styles';
import useMediaQuery from '@mui/material/useMediaQuery';
import { ASSETS_URL } from '../../../consts/common';

export interface DrawerButtonProps extends CreateClassesProps {
  /**
   * On click handler.
   */
  onClick: ButtonProps['onClick'];
  /**
   * Contents of the tooltip.
   */
  title: string;
  isRightSideBar?: boolean;
  open?: boolean;
  hideHeader?: boolean;
}

const DrawerButton = (props: DrawerButtonProps) => {
  const { side, onClick, title, locked, isRightSideBar, hideHeader, open } = props;
  const theme = useTheme();

  const isMdUp = useMediaQuery(theme.breakpoints.up('custommd'));
  const isSmUp = useMediaQuery(theme.breakpoints.down('custommd'));
  const classes = createClasses({ side, locked, isMdUp, isSmUp, isRightSideBar, hideHeader });

  return (
    <Tooltip disableInteractive title={title} placement={side === 'left' ? 'right' : 'left'}>
      <Grid className={classes.container}>
        <Button
          className={classes.button}
          onClick={onClick}
          data-testid={`button-drawer${side === 'left' ? 'Left' : 'Right'}`}
        >
          <ReactSVG src={`${ASSETS_URL}/icons/icon_arrow.svg`} />
        </Button>
        <div className={classes.animation}></div>
      </Grid>
    </Tooltip>
  );
};

DrawerButton.defaultProps = {
  locked: false
};

const m = memo(DrawerButton);
export { m as DrawerButton };