import React from 'react';

import { StyledEngineProvider } from '@mui/material/styles';
import MuiTooltip from '@mui/material/Tooltip';

import { bem } from 'utils/bem';

import { THEME } from '../../constants'; // TODO: Finish config Rollup to work properly with absolute path DEC-10606
import { Typography, TYPOGRAPHY_TYPE } from '../Typography';
import { TooltipProps } from './types';

import styles from './tooltip.scss';

export const tooltipClassName = bem(styles, 'tooltip');
export const tooltipTriggerClassName = bem(styles, 'tooltip-trigger');

export const Tooltip = ({
  isOpened,
  theme = THEME.light,
  className,
  contentClassName,
  popperClassName,
  children,
  tooltip,
  placement,
  onOpen,
  onClose,
  isInteractive = true,
  isDisabled = false,
  ...dataAttributes
}: TooltipProps): JSX.Element => {
  const content =
    typeof tooltip === 'string' ? (
      <Typography
        type={TYPOGRAPHY_TYPE.body4}
        theme={theme}
      >
        {tooltip}
      </Typography>
    ) : (
      <>{tooltip}</>
    );

  return (
    <StyledEngineProvider injectFirst>
      <MuiTooltip
        open={isOpened}
        title={
          isDisabled ? null : (
            <div
              {...dataAttributes}
              className={tooltipClassName('body', undefined, contentClassName)}
            >
              {content}
            </div>
          )
        }
        classes={{
          popper: tooltipClassName(null, { [theme]: true }, popperClassName),
          tooltip: tooltipClassName('content'),
          arrow: tooltipClassName('arrow'),
        }}
        placement={placement}
        onOpen={onOpen}
        onClose={onClose}
        disableInteractive={!isInteractive}
        TransitionProps={{ timeout: 0 }}
        arrow
      >
        <div className={tooltipTriggerClassName(null, undefined, className)}>{children}</div>
      </MuiTooltip>
    </StyledEngineProvider>
  );
};