/* eslint-disable-next-line */
import ClickAwayListener from '@mui/material/ClickAwayListener';
import Drawer from '@mui/material/Drawer';
import SecondaryDrawer from '@mui/material/Drawer';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Tooltip from '@mui/material/Tooltip';

import { ASSETS_URL } from '../../consts/common';
import { CustomIcon } from '../custom-icon';
import { DrawerButton } from '../@navigation/drawer-button';

import createClasses, { DrawerStyleProps } from './styles';
import { useRightSideBar } from './right-sidebar.context';

export const RightSideBar = (props: Omit<DrawerStyleProps, 'open'>) => {
  const {
    mainComponent,
    open,
    openSecondary,
    setOpenSecondary,
    componentsArray,
    handleComponentsArray,
    clearComponentsArray,
    handleMainDrawer,
    showDrawer,
    durationTime,
    drawerLocked,
    setOpen,
    dispatchEvent
  } = useRightSideBar();

  const styles = createClasses({ open });

  const drawerStyle = {
    backgroundColor: 'transparent',
    overflow: 'hidden'
  };

  const handleClickAway = (event: Event) => {
    if (!drawerLocked) {
      open && dispatchEvent('closed', event);
      return setOpen(false);
    }
  };

  return (
    <Box position="relative">
      <SecondaryDrawer
        transitionDuration={durationTime}
        onClose={(event: Event) => {
          dispatchEvent('closedSecondary', event);
          setOpenSecondary(false);
          clearComponentsArray();
        }}
        open={openSecondary}
        anchor="right"
        classes={{
          root: styles.root,
          paper: styles.paper
        }}
      >
        <CustomIcon
          data-testid="closeSecondaryButton"
          customSize={24}
          onClick={event => {
            dispatchEvent('closedSecondary', event as unknown as Event);
            handleComponentsArray();
          }}
          className={styles.closeIcon}
          src={`${ASSETS_URL}/icons/icon_close.svg`}
        />
        {componentsArray[0]}
      </SecondaryDrawer>
      {showDrawer && (
        <ClickAwayListener onClickAway={handleClickAway}>
          <div>
            {!open && (
              <Tooltip title="Open Panel" placement="left">
                <Button
                  data-testid="rightDrawerOpenButton"
                  className={styles.rightButton}
                  onClick={event => handleMainDrawer(event as unknown as Event)}
                >
                  <CustomIcon src={`${ASSETS_URL}/icons/icon_arrow.svg`} />
                </Button>
              </Tooltip>
            )}
            <Drawer
              BackdropProps={{ style: drawerStyle }}
              variant="persistent"
              anchor="right"
              open={open}
              className="mui-fixed"
              classes={{
                paper: styles.rightDrawer
              }}
            >
              <DrawerButton
                data-testid="mainDrawerOpenButton"
                isRightSideBar={true}
                side="right"
                onClick={event => handleMainDrawer(event as unknown as Event)}
                title="Open / Close Right Panel"
                locked={drawerLocked}
                isMdUp
              />
              {mainComponent}
            </Drawer>
          </div>
        </ClickAwayListener>
      )}
    </Box>
  );
};