import React, { ReactNode, useState } from "react";
import StyledTooltip from "./StyledTooltip";
import StyledTooltipWrapper from "./StyledTooltipWrapper";

export type direction = "top" | "right" | "bottom" | "left";

type classes = {
  wrapper?: string;
  text?: string;
};

export type StyledTooltipWrapperProps = {
  children: ReactNode;
};

export type StyledTooltipProps = {
  color?: string;
  background?: string;
  direction: direction;
};

export type TooltipProps = StyledTooltipWrapperProps &
  StyledTooltipProps & {
    classes?: classes;
    title: string;
    props?: any;
  };

const Tooltip: React.FC<TooltipProps> = ({
  children,
  classes,
  color,
  background,
  direction = "top",
  title,
  ...props
}) => {
  const [show, setShow] = useState<boolean>(false);

  const showTooltip = () => setShow(true);

  const hideTooltip = () => setShow(false);

  return (
    <StyledTooltipWrapper
      className={classes?.wrapper}
      onMouseEnter={showTooltip}
      onMouseLeave={hideTooltip}
      {...props}
    >
      {children}
      {show && (
        <StyledTooltip
          className={classes?.text}
          background={background}
          color={color}
          direction={direction}
        >
          {title}
        </StyledTooltip>
      )}
    </StyledTooltipWrapper>
  );
};

export default Tooltip;