import React, { forwardRef } from "react";
import MuiTooltip from "@mui/material/Tooltip";
import "./Tooltips.styles.scss";

export const Tooltip = forwardRef((props, ref) => {
  const {
    title,
    description,
    orientation = "top",
    variant = "primary-tooltip",
    children,
    isHoverEnabled = true,
    className,
    ...args
  } = props;

  const getVariant = (variantName) => {
    switch (variantName) {
      case "secondary":
        return "secondary-tooltip";
      case "tertiary":
        return "tertiary-tooltip";
      case "feature":
        return "feature-tooltip";
      default:
        return "primary-tooltip";
    }
  };

  const tooltipTitle =
    variant === "feature" ? (
      <span className="impact-tooltip-feature-content">
        <span className="impact-tooltip-feature-title">{title}</span>
        {description ? (
          <span className="impact-tooltip-feature-description">
            {description}
          </span>
        ) : null}
      </span>
    ) : (
      title
    );

  return (
    <MuiTooltip
      ref={ref}
      title={tooltipTitle}
      placement={orientation}
      arrow
      classes={{
        popper: `impact-tooltip-container ${getVariant(variant)} ${
          className ?? ""
        }`.trim(),
      }}
      disableFocusListener={!isHoverEnabled}
      disableHoverListener={!isHoverEnabled}
      disableTouchListener={!isHoverEnabled}
      PopperProps={{
        sx: {
          zIndex: 9999,
        },
      }}
      {...args}
    >
      {children}
    </MuiTooltip>
  );
});
