/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import React, {useState} from 'react';

import {TooltipContainer, TooltipBubble} from './style';
import {Position} from './types';

export {Position};

interface ITooltip {
  message: string;
  position: Position;
  children: React.JSX.Element | React.JSX.Element[];
  width?: number;
}

export const Tooltip = (props: ITooltip): React.JSX.Element => {
  const {message, position, children, width} = props;
  const [displayTooltip, setDisplayTooltip] = useState(false);
  const showTooltip = () => {
    setDisplayTooltip(true);
  };

  const hideTooltip = () => {
    setDisplayTooltip(false);
  };

  return (
    <TooltipContainer onBlur={hideTooltip} onMouseOut={hideTooltip}>
      {displayTooltip && (
        <TooltipBubble className={`tooltip-${position}`} width={width}>
          <div className="tooltip-message">{message}</div>
        </TooltipBubble>
      )}
      <span onFocus={showTooltip} onMouseOver={showTooltip}>
        {children}
      </span>
    </TooltipContainer>
  );
};

Tooltip.Position = Position;
