import React, {useState, useEffect} from 'react';

export default function usePopup(wrapperRef, state = false) {
    const [opened, setOpened] = useState(state);

    function handleClickOutside(event) {
        if (wrapperRef && wrapperRef.current && !wrapperRef.current.contains(event.target)) {
            setOpened(false);
        }
    }

    function toggler () {
        setOpened(!opened);
    }

    useEffect(() => {
            document.addEventListener('mousedown', handleClickOutside);
            return () => {
                document.removeEventListener('mousedown', handleClickOutside);
            }
        }
    );

    return [opened, toggler];
}