'use client';

import { useEffect, useId, useRef, useState } from 'react';

interface ToolTipProps {
    hoverText: string;
    children: React.ReactNode;
    side?: 'top' | 'bottom';
    sideOffset?: number;
};


const ToolTip = ({ hoverText, children, side='top', sideOffset }: ToolTipProps) => {

    const id = useId();
    const popoverId = `${id}-popover`;
    const [open, setOpen] = useState<boolean>(false);
    const popoverRef = useRef<HTMLDivElement>(null);
    const triggerRef = useRef<HTMLDivElement>(null);
    const animationRequestRef = useRef<number|null>(null);

    const showTooltip = () => {
        const popover = popoverRef.current;
        const trigger = triggerRef.current;
        if(!popover || !trigger) return;

        popoverRef.current?.showPopover();
    }

    const hideTooltip = () => {
        const el = popoverRef.current;
        if(el?.matches(':popover-open')) {
            el.hidePopover();
        }
    }

    useEffect(() => {
        const popover = popoverRef.current;
        const trigger = triggerRef.current;
        if(!popover) return;

        const onToggle = (e: ToggleEvent) => {
            setOpen(e.newState === 'open');
        }

        popover.addEventListener('toggle', onToggle);

        if(trigger) {
            animationRequestRef.current = requestAnimationFrame(() => placeToolTip(trigger, popover, side, sideOffset));
        }

        return () => {
            popover.removeEventListener('toggle', onToggle);
            if(animationRequestRef.current) {
                cancelAnimationFrame(animationRequestRef.current);
            }
        };
    }, []);

    function placeToolTip(trigger: HTMLElement, popover: HTMLElement, preffered: 'top'|'bottom' = 'top', sideOffset = 8) {
        const t = trigger.getBoundingClientRect();
        const b = popover.getBoundingClientRect();

        let placement = preffered;
        if(preffered === 'top' && t.top - b.height - sideOffset < 0) placement = 'bottom';
        if(preffered === 'bottom' && t.bottom + b.height + sideOffset > innerHeight) placement = 'top';

        popover.style.setProperty('position-area', placement);

        placement === 'top' ? 
            popover.style.setProperty('margin-bottom', '4px') 
            : popover.style.setProperty('margin-top', '4px');
    }

    function handleKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
        if(e.key === 'Escape') {
            hideTooltip();
        }
    }


    return (
        <>
            <div 
                ref={triggerRef}
                id={`${id}-trigger`}
                style={{ anchorName: '--tooltip-trigger' } as React.CSSProperties }
                className='w-fit text-sm px-4 py-2 border border-border rounded-md hover:bg-accent cursor-pointer'
                onMouseEnter={showTooltip}
                onMouseLeave={hideTooltip}
                onFocus={showTooltip}
                onBlur={hideTooltip}
                tabIndex={0}
                aria-describedby={ open ? popoverId : undefined}
                onKeyDown={(e) => handleKeyDown(e)}
            >
                {children}
            </div>
            <div 
                ref={popoverRef}
                id={popoverId}
                popover="manual"
                role="tooltip"
                aria-hidden={ open ? 'false' : 'true'}
                aria-live="polite"
                style={{ positionAnchor: '--tooltip-trigger' } as React.CSSProperties }
                className="max-w-xs text-sm rounded-md px-4 py-2 bg-foreground text-background 
                    opacity-0 scale-95 translate-y-1 
                    montion-safe:transition-transform montion-safe:duration-300
                    motion-reduce:transition-none motion-reduce:scale-100 montion-reduce:translate-y-0
                    [position-area:bottom]
                    [&:popover-open]:opacity-100 [&:popover-open]:scale-100 [&:popover-open]:translate-y-0"
                onMouseEnter={showTooltip}
                onMouseLeave={hideTooltip}
                onKeyDown={(e) => {if(e.key === 'Escape') hideTooltip() }}
            >
                {hoverText}
            </div>
        </>
    )
}

export default ToolTip;