class Overlay {

    constructor(elem) {
        this.container = elem;
        elem.addEventListener('click', event => {
             if (event.target === elem) return this.hide();
        });
        let closeButtons = elem.querySelectorAll('.popup-header-close');
        for (let i=0; i < closeButtons.length; i++) {
            closeButtons[i].addEventListener('click', this.hide.bind(this));
        }
    }

    toggle(show = true) {
        let start = Date.now();
        let duration = 240;

        function setOpacity() {
            let elapsedTime = (Date.now() - start);
            let targetOpacity = show ? (elapsedTime / duration) : 1-(elapsedTime / duration);
            this.container.style.opacity = targetOpacity;
            if (elapsedTime > duration) {
                this.container.style.display = show ? 'flex' : 'none';
                this.container.style.opacity = '';
            } else {
                requestAnimationFrame(setOpacity.bind(this));
            }
        }

        requestAnimationFrame(setOpacity.bind(this));
    }

    hide() { this.toggle(false); }
    show() { this.toggle(true); }

}

export default Overlay;