import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
import { usePopper } from 'react-popper';

const Dropdown = forwardRef((props: any, forwardedRef: any) => {
    const [visibility, setVisibility] = useState(false);

    // ⬇️ state instead of refs, so usePopper reacts when these mount
    const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
    const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);

    const { styles, attributes } = usePopper(referenceElement, popperElement, {
        placement: props.placement || 'bottom-end',
        modifiers: [
            {
                name: 'offset',
                options: {
                    offset: props.offset || [0, 8],
                },
            },
        ],
    });

    const handleDocumentClick = (event: any) => {
        if (
            referenceElement?.contains(event.target) ||
            popperElement?.contains(event.target)
        ) {
            return;
        }
        setVisibility(false);
    };

    useEffect(() => {
        document.addEventListener('mousedown', handleDocumentClick);
        return () =>
            document.removeEventListener('mousedown', handleDocumentClick);
    }, [referenceElement, popperElement]); // re-bind with latest closures

    useImperativeHandle(forwardedRef, () => ({
        close: () => setVisibility(false),
    }));

    return (
        <>
            <button
                ref={setReferenceElement}
                type="button"
                className={props.btnClassName}
                onClick={() => setVisibility((v: boolean) => !v)}
            >
                {props.button}
            </button>

            {visibility && (
                <div
                    ref={setPopperElement}
                    style={styles.popper}
                    {...attributes.popper}
                    className="z-50"
                >
                    {props.children}
                </div>
            )}
        </>
    );
});

export default Dropdown;