import {useCallback, useEffect, useState, MouseEvent} from "react";

export function useDropdownState(initialState = false): [boolean, (evt: MouseEvent<any>) => void, (state: boolean) => void] {
    const [ open, setOpen ] = useState(initialState);

    const toggle = useCallback((evt) => {
        evt.stopPropagation();
        setOpen(!open)
    }, [ open ]);

    useEffect(() => {
        if(open) {
            window.addEventListener("click", toggle);
        } else {
            window.removeEventListener("click", toggle);
        }
        return () => window.removeEventListener("click", toggle);
    }, [ open ]);

    return [ open, toggle, setOpen ];
}