import React, { useEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom';

import { HelpIcon } from '@/icons';

type TooltipProps = {
  label: string;
  padded?: boolean;
};

const Tooltip: React.FC<TooltipProps> = ({ label, padded }) => {
  const [showTooltip, setShowTooltip] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const checkIfClickedOutside = (e: MouseEvent) => {
      if (
        showTooltip &&
        ref.current &&
        !ref.current.contains(e.target as Node)
      ) {
        setShowTooltip(false);
      }
    };
    document.addEventListener('mousedown', checkIfClickedOutside);
    return () => {
      document.removeEventListener('mousedown', checkIfClickedOutside);
    };
  }, [showTooltip]);

  return (
    <div className={`relative ${padded ? 'p-[2px]' : ''}`} ref={ref}>
      <button
        className='color-primary cursor-default rounded-full p-1 focus:outline-none'
        onClick={() => setShowTooltip(!showTooltip)}
        onMouseEnter={() => setShowTooltip(true)}
        onMouseLeave={() => setShowTooltip(false)}
      >
        <HelpIcon className='h-4 w-4' />
      </button>
      {showTooltip &&
        ref.current &&
        createPortal(
          <div
            style={{
              left: ref.current?.getBoundingClientRect().left + 20,
              top: ref.current?.getBoundingClientRect().top + 20,
            }}
            className='border-opacity-20 absolute z-10 w-48 rounded border border-white bg-tertiary p-2 font-sans text-sm text-white shadow-lg'
          >
            {label}
          </div>,
          document.body
        )}
    </div>
  );
};

export default Tooltip;