import { useRef, useState } from 'react';

import type { CSSProperties, FC, ReactNode } from 'react';

import AnchoredDialog from '~/src/components/AnchoredDialog';

interface TooltipProps {
  content: ReactNode;
  children: ReactNode;
  style?: CSSProperties;
}

const Tooltip: FC<TooltipProps> = ({ content, children, style }) => {
  const anchorRef = useRef<HTMLSpanElement>(null);
  const [isOpen, setIsOpen] = useState(false);

  const close = () => {
    setIsOpen(false);
  };

  return (
    <>
      <span
        ref={anchorRef}
        onMouseEnter={() => setIsOpen(true)}
        onMouseLeave={close}
        // we do not want the tooltip to open/close when clicking on the trigger element,
        // so we stop propagation of click events
        onClick={(event) => {
          event.stopPropagation();
        }}
      >
        {children}
      </span>
      {isOpen && (
        <AnchoredDialog
          targetElRef={anchorRef}
          renderContent={() => content}
          color="#fff"
          onClose={close}
          style={{
            padding: '1.2rem 1.4rem',
            fontSize: '1.2rem',
            lineHeight: '1.7rem',
            width: '28rem',
            color: '#222',
            overflowWrap: 'break-word',
            ...style,
          }}
          overlayStyle={{
            // prevent the invisible overlay from blocking pointer events
            // on elements behind the tooltip (e.g. triggers onMouseLeave on the anchor)
            pointerEvents: 'none',
          }}
        />
      )}
    </>
  );
};

export default Tooltip;