/* eslint jsx-a11y/click-events-have-key-events: warn */

/* eslint jsx-a11y/no-static-element-interactions: warn */
import React, { useEffect, useRef, useState } from 'react';

type AuraTagProps = {
  label: string;
  tooltip?: string;
  auraImage?: string;
  gradient?: string;
};

const AuraTag: React.FC<AuraTagProps> = ({
  label,
  tooltip,
  auraImage,
  gradient,
}) => {
  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]);

  const auraStyle = auraImage
    ? {
        backgroundImage: `url(${auraImage})`,
        backgroundSize: '500% 500%',
        backgroundPosition: 'top',
      }
    : gradient
      ? { background: gradient }
      : {};

  return (
    <>
      <div className={`relative inline-block h-[20px]`} ref={ref}>
        <div
          onClick={() => tooltip && setShowTooltip(!showTooltip)}
          onMouseEnter={() => tooltip && setShowTooltip(true)}
          onMouseLeave={() => tooltip && setShowTooltip(false)}
          className={`${gradient ? '' : 'auraAnimate'} ml-[4px] cursor-default rounded bg-background-tertiary px-2 text-xs leading-[20px] font-semibold text-foreground-primary-on-dark`}
          style={auraStyle}
        >
          <span
            style={{
              textShadow: gradient
                ? ''
                : '1px 1px 3px var(--foreground-primary-on-dark)',
            }}
          >
            {label}
          </span>
        </div>
        {showTooltip && tooltip && (
          <div className='font-xs border-opacity-20 absolute left-0 z-10 mt-[2px] ml-1 w-48 rounded border border-white bg-tertiary p-2 font-sans text-white shadow-lg'>
            {tooltip}
          </div>
        )}
      </div>
    </>
  );
};

export default AuraTag;