class PopupBuilder {
    constructor(maxWidth=400) {
        this.elements = []
        this.inputs = {}

        this.container = document.createElement('div');
        this.container.classList.add('popup-container');
        this.container.style.opacity = '0';

        this.maxWidth = maxWidth;
    }

    add(element) {
        this.elements.push(element)
        return this
    }

    show() {
        var popup = document.createElement('div');
        popup.classList.add('popup');
        popup.style.maxWidth = this.maxWidth + 'px';

        this.container.appendChild(popup);

        for (var i = 0; i < this.elements.length; i++) {
            popup.appendChild(this.elements[i].getHTML());

            var inputs = this.elements[i].getInputElements();
            for (var j = 0; j < inputs.length; j++) {
                this.inputs[inputs[j].id] = inputs[j].element;
            }
        }

        document.body.appendChild(this.container);

        document.activeElement.blur();

        const containerReference = this.container;
        setTimeout(function() {
            containerReference.style.opacity = '1';
        }, 1)   
    }

    get_input_value(id) {
        return this.inputs[id].value;
    }

    close() {
        // console.log("CLOSINOG")
        if (this.is_notif) {
            this.container.style.right = '-400px';
            setTimeout(function() {
                this.container.remove();
            }.bind(this), 250);
        } else {
            this.container.style.opacity = '0';
            this.container.style.pointerEvents = 'none';
            let containerReference = this.container;
            setTimeout(function() {
                //it's abstracted away from the popup context in the timeout so you have to use a reference not this
                //we love JS
                containerReference.remove();
            }, 250);
        }
    }
}

class PopupElement {
    constructor() {
        this.style = "";
    }

    getHTML() {

    }

    setStyle(style) {
        this.style = style;
        return this;
    }

    getInputElements() {
        return []
    }
}

class PopupText extends PopupElement {
    constructor(text) {
        super();
        this.text = text;
    }

    getHTML() {
        var element = document.createElement('p');
        element.innerHTML = this.text;
        element.style = this.style;
        element.style.color = 'white';
        return element;
    }
}

class PopupButton extends PopupElement {
    constructor(text, onclick, style) {
        super();
        this.text = text;
        this.onclick = onclick; // function reference
        this.style = style;
    }

    getHTML() {
        var element = document.createElement('button');
        element.innerHTML = this.text;
        element.onclick = this.onclick;
        element.style = this.style;
        return element;
    }
}

class PopupImage extends PopupElement {
    constructor(src, style) {
        super();
        this.src = src;
        this.style = style;
    }

    getHTML() {
        var element = document.createElement('img');
        element.src = this.src;
        element.style = this.style;

        return element;
    }
}

class PopupTextInput extends PopupElement {
    constructor(text, placeholder, id, is_hidden=false) {
        super();
        this.text = text;
        this.placeholder = placeholder;
        this.id = id;
        this.is_hidden = is_hidden;
        this.input_element = null;
    }

    getHTML() {
        var textInputContainer = document.createElement('div');

        var element = document.createElement('input');
        element.type = 'text';
        element.placeholder = this.placeholder;

        element.style.width = '100%';
        element.style.height = '40px';
        element.style.fontWeight = '200';

        if (this.is_hidden) {
            element.type = 'password';
        }

        this.input_element = element;

        textInputContainer.appendChild(element);

        return textInputContainer;
    }

    getInputElements() {
        return [{
            id: this.id,
            element: this.input_element
        }]
    }
}

class PopupDismissButton extends PopupButton {
    constructor(text, style={}) {
        super(text, function() {
            let parent = this.parentElement;
            while (!parent.classList.contains('popup-container')) {
                parent = parent.parentElement;
            }
            
            parent.style.opacity = '0';
            parent.pointerEvents = 'none';
            
            setTimeout(function(parent) {
                parent.remove();
            }.bind(null, parent), 250);
        }, style);
    }
}

class PopupHStack extends PopupElement {
    constructor() {
        super();
        this.elements = [];
        this.style = "";
    }

    add(element) {
        this.elements.push(element);
        return this;
    }

    setStyle(style) {
        this.style = style;
        return this;
    }

    getHTML() {
        var hstack = document.createElement('div');
        hstack.style = this.style;
        hstack.style.display = 'flex';
        hstack.style.flexDirection = 'row';
        hstack.style.gap = '10px';

        for (var i = 0; i < this.elements.length; i++) {
            hstack.appendChild(this.elements[i].getHTML());
            hstack.children[i].style.flex = '1';
        }

        return hstack;
    }
}