import {
  Tooltip as MuiTooltip,
  Stack,
  Typography,
  useTheme,
} from '@mui/material';

import { type TooltipBodyProps, type TooltipProps } from './types';

const TooltipBody = ({ title, description }: TooltipBodyProps) => {
  const theme = useTheme();
  const textColor = theme.palette?.new?.text?.neutral?.inverted;

  return (
    <Stack sx={{ p: 1 }}>
      <Typography
        variant="globalS"
        sx={{
          fontWeight: 'semiBold',
          color: textColor,
        }}
      >
        {title}
      </Typography>
      <Typography
        variant="globalXS"
        sx={{ color: textColor }}
      >
        {description}
      </Typography>
    </Stack>
  );
};

const Tooltip = ({
  children,
  disableTooltip = false,
  delay = 0,
  sx,
  slotProps,
  open,
  ...props
}: TooltipProps) => {
  const {
    title = '',
    description = '',
    direction = 'top',
    followCursor = false,
  } = props;
  const theme = useTheme();
  const tooltipBackground = theme.palette?.new?.background?.elements?.inverted;
  const tooltipArrow = theme.palette?.new?.background?.elements?.inverted;

  return (
    <MuiTooltip
      arrow
      open={open}
      placement={direction}
      PopperProps={{
        sx: {
          '.MuiTooltip-tooltip': {
            background: tooltipBackground,
            maxWidth: '312px',
          },
          '.MuiTooltip-arrow': {
            color: tooltipArrow,
          },
        },
      }}
      title={
        !disableTooltip ? (
          <TooltipBody
            title={title}
            description={description}
          />
        ) : null
      }
      enterDelay={delay}
      enterNextDelay={delay}
      sx={sx}
      slotProps={slotProps}
      followCursor={followCursor}
    >
      {children}
    </MuiTooltip>
  );
};

export type { TooltipProps };

Tooltip.displayName = 'Tooltip';

export default Tooltip;