import { memo } from 'react';
import Drawer from '@mui/material/Drawer';
import Button from '@mui/material/Button';
import Tooltip from '@mui/material/Tooltip';
import Box from '@mui/material/Box';
import ClickAwayListener from '@mui/base/ClickAwayListener';
import { ReactSVG } from 'react-svg';
import noop from 'lodash/noop';
import { ASSETS_URL } from '../../consts/common';
import { DrawerButton } from '../@navigation/drawer-button';
import { useLayout } from './layout.context';
import createClasses from './styles';

export const InfoDrawer = memo(() => {
  const { handleDrawerStateChange, rightDrawerOpenState, infoDrawerContent, leftDrawerOpenState } =
    useLayout();
  const styles = createClasses({ leftDrawerOpenState });
  return (
    <Box position="relative">
      <Tooltip title="Open Panel" placement="left">
        <Button
          data-testid="rightDrawerOpenButton"
          className={styles.rightButton}
          onClick={handleDrawerStateChange('open')}
        >
          <ReactSVG src={`${ASSETS_URL}/icons/icon_arrow.svg`} />
        </Button>
      </Tooltip>
      <ClickAwayListener
        onClickAway={rightDrawerOpenState === 'open' ? handleDrawerStateChange('closed') : noop}
      >
        <Drawer
          variant="permanent"
          anchor="right"
          open={rightDrawerOpenState !== 'closed'}
          classes={{
            paper: styles.rightDrawer
          }}
        >
          <DrawerButton
            isRightSideBar={true}
            locked={rightDrawerOpenState === 'locked'}
            side="right"
            onClick={handleDrawerStateChange(rightDrawerOpenState === 'open' ? 'locked' : 'closed')}
            title="Open / Close Right Panel"
          />
          {infoDrawerContent}
        </Drawer>
      </ClickAwayListener>
    </Box>
  );
});