import IconHelp from '@mui/icons-material/HelpOutline';
import IconClose from '@mui/icons-material/HighlightOff';
import { IconButton, Tooltip } from '@mui/material';

import { isNil } from 'ramda';
import { type ReactElement, useState } from 'react';
import { makeStyles } from 'tss-react/mui';

const useStyles = makeStyles()((theme) => ({
  buttonClose: {
    position: 'absolute',
    right: theme.spacing(-0.5),
    top: theme.spacing(-1)
  },
  tooltip: {
    backgroundColor: theme.palette.common.white,
    boxShadow: theme.shadows[3],
    color: theme.palette.text.primary,
    fontSize: theme.typography.pxToRem(12),
    maxWidth: 500
  }
}));

interface Props {
  children?: ReactElement;
  closeTooltip?: () => void;
  labelSearchHelp: string;
  openTooltip?: boolean;
  toggleTooltip?: () => void;
}

const PersistentTooltip = ({
  children,
  labelSearchHelp,
  openTooltip,
  toggleTooltip: toggleTooltipProp,
  closeTooltip: closeTooltipProp
}: Props): JSX.Element => {
  const { classes } = useStyles();

  const [open, setOpen] = useState(openTooltip || false);

  const toggleTooltip = (): void => {
    if (isNil(openTooltip)) {
      setOpen(!open);
    } else {
      toggleTooltipProp?.();
    }
  };

  const closeTooltip = (): void => {
    if (!openTooltip) {
      setOpen(false);

      return;
    }

    closeTooltipProp?.();
  };

  const title = (
    <div style={{ position: 'relative' }}>
      <IconButton
        className={classes.buttonClose}
        onClick={closeTooltip}
        size="small"
      >
        <IconClose fontSize="small" />
      </IconButton>
      {children}
    </div>
  );

  return (
    <Tooltip
      classes={{ tooltip: classes.tooltip }}
      open={openTooltip || open}
      title={title}
    >
      <IconButton
        aria-label={labelSearchHelp}
        onClick={toggleTooltip}
        size="small"
      >
        <IconHelp />
      </IconButton>
    </Tooltip>
  );
};

export default PersistentTooltip;