window.twpopup = (function() {
    console.log("bruh");

    function Popup() {
        console.log("Popup()");
    }

    var popup = {
        modal: function(title, content, buttons = []) {

            let buttons_html = "";
            /*
                {
                    title: 'Button Title',
                    attributes: [
                        {
                            attr:'',
                            value:''
                        }
                    ],

                    onClick: function(){

                    }
                }
            */

            for (var i = buttons.length - 1; i >= 0; i--) {
                let button = buttons[i];

                let attributes_html = ``;
                let custom_classes = ``;

                if ("attributes" in button && button.attributes.length > 0) {
                    for (var j = button.attributes.length - 1; j >= 0; j--) {
                        if (button.attributes[j].attr === 'class') {
                            custom_classes += " " + button.attributes[j].value;
                        } else {
                            attributes_html += `${button.attributes[j].attr}="${button.attributes[j].value}" `;
                        }
                    }
                }

                let unique_id = "twsnipper-click-handler-" + Date.now();
                let button_html = `<button type='button' id='${unique_id}' ${attributes_html} class='btn btn-primary ${custom_classes}'>${button.title}</button>`;

                if ("onClick" in button) {
                    $(document).on('click', '#' + unique_id, button.onClick);
                }

                buttons_html += button_html + "\n";
            }

            jQuery('body').append(`
                <div id="create_review_modal" tabindex="0" class="lbox-wrapper ${CLASSES.POPUP}">
                    <div id="overlay1" class="overlay " style="height: 1186px; z-index: 130;"></div>
                    <div id="box1" class="lbox " style="width: 662px; height: 650px; position: fixed; z-index: 131; left: 609px; top: 20%; opacity: 1; margin-top: 0px;">
                        <a class="w-modal-close ${CLASSES.POPUP_CLOSE}">X</a>
                        <div id="boxContents1" class="lboxContents modal">
                            <div class="sectionFormLightbox">
                                <div class="modal-header">
                                    <h2 class="modal-title">${title}</h2>
                                </div>
                                <div class="modal-body">${content}</div>
                                <div class="modal-footer flex">
                                    ${buttons_html}
                                    <button type="button" class="${CLASSES.POPUP_CLOSE} btn btn-secondary" data-dismiss="modal">Cancel</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-tab-catcher" tabindex="0"></div>
                </div>
            `);
        }
    };

    return popup;
}());