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

function Popup() {
    const [opened, setOpened] = useState(false);

    let wrapperRef;

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

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

    function setWrapperRef(node) {
        wrapperRef = node;
    }

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

    const isOpened = opened ? '' : 'hide';
    return (
        <div ref={setWrapperRef}>
            <button onClick={toggleButton}>Toggle modal</button>
            <div className={'modal modal-hook ' + isOpened}>
                <h2>Opened hook based modal</h2>
            </div>
        </div>
    );
}

export default Popup;