var pmaWidgetInstance = {
    debug: false,
    baseUrl: "https://public.pricemania.sk",
    cssId: "pma-",
    loaded: false,
 
    initWidget: function(widgetId){
        this.initJavascript(widgetId);
    },

    initJavascript: function(widgetId){
        var btns = this.findModalWidgetButtons(widgetId);
        for(var btn of btns){
            var modal = null;
            var instance = this;

            if(btn){
                btn.onclick = function(event) {
                    event.preventDefault();
                    if(!instance.loaded){
                            instance.loaded = true; 

                            instance.appendCss();
                            instance.appendHtml(widgetId);
                            instance.insertProductScript(widgetId);

                            modal = instance.findModalWidget(widgetId);
                            var span = document.getElementsByClassName(`${instance.cssId}close`)[0];

                            span.onclick = function() {
                                modal.style.display = "none";
                            }  
                    }

                    modal.style.display = "block";
                }

                window.onclick = function(event) {
                    if (event.target == modal) {
                        modal.style.display = "none";
                    }
                }
            }
        }
    },

    insertProductScript: function(widgetId){
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.src = this.baseUrl + `/v1/widget/product/script.js?w_id=${widgetId}&force_init=true`;
        try {
                document.body.appendChild(s);
        } catch (e) {
            document.body.appendChild(s);
        }
    },

    findModalWidgetButtons: function(widgetId){
        var currentModalButtons = [];
        var modalButtons = document.getElementsByClassName(`pma-modal-widget-button`);
        for(var modalButton of modalButtons){
            if(modalButton.getAttribute('data-id') == widgetId){
                currentModalButtons.push(modalButton);
            }
        }

        return currentModalButtons;
    },

    findModalWidget: function(widgetId){
        var modalWidgets = document.getElementsByClassName(`${this.cssId}modal-widget`);
        for(var modalWidget of modalWidgets){
            if(modalWidget.getAttribute('data-id') == widgetId){
                return modalWidget;
            }
        }

        return null;
    },

    appendHtml: function(widgetId) {
        var html = this.generateHtml(widgetId);
        var bodyElement = document.getElementsByTagName("BODY")[0];
        if(bodyElement){
            bodyElement.insertAdjacentHTML('afterbegin', html);
        }
    },

    appendCss: function() {
        var css = this.generateCss();
        var element = document.createElement('style');
        element.setAttribute('type', 'text/css');

        if ('textContent' in element) {
            element.textContent = css;
        } else {
            element.styleSheet.cssText = css;
        }

        document.getElementsByTagName('head')[0].appendChild(element);
    },

    push: function(pmaArguments){
        if(pmaArguments.length){
            var pmaArgumentsData = [].slice.call(pmaArguments, 0);
            if(pmaArgumentsData.length){
                var methodName = pmaArgumentsData[0];
                var methodArguments = pmaArgumentsData.slice(1);
                if(pmaInstance.hasOwnProperty(methodName)){
                    pmaInstance[methodName].apply(pmaInstance,methodArguments);
                }
            }
        }
    },

    setDebug: function(debug){
        if(debug){
            this.debug = debug;
        }
        else{
            this.debug = true;
        }
    },

    generateCss: function(){
        var css = `
           .${this.cssId}modal-widget {
                display: none; 
                position: fixed; 
                z-index: 2147483647; 
                padding-top: 100px; 
                padding-bottom: 100px;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                width: 100%; 
                overflow: auto; 
                background-color: rgb(0,0,0); 
                background-color: rgba(0,0,0,0.4); 
            }

            .${this.cssId}modal-content {
                position: relative;
                background-color: #fefefe;
                margin: auto;
                padding: 0;
                border: 1px solid #888;
                width: 95%;
                box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
                -webkit-animation-name: ${this.cssId}animatetop;
                -webkit-animation-duration: 0.4s;
                animation-name: ${this.cssId}animatetop;
                animation-duration: 0.4s
            }

            @-webkit-keyframes ${this.cssId}animatetop {
                from {top:-300px; opacity:0} 
                to {top:0; opacity:1}
            }

            @keyframes ${this.cssId}animatetop {
                from {top:-300px; opacity:0}
                to {top:0; opacity:1}
            }

            .${this.cssId}close {
                color: black;
                float: right;
                font-size: 40px;
                font-weight: bold;
            }

            .${this.cssId}close:hover,
            .${this.cssId}close:focus {
                color: #000;
                text-decoration: none;
                cursor: pointer;
            }

            .${this.cssId}modal-header {
                min-height: 50px;
                padding: 2px 16px;
                background-color: #ffffff;
                color: white;
            }

            .${this.cssId}modal-body {padding: 2px 16px;}

            .${this.cssId}modal-footer {
                min-height: 50px;
                padding: 2px 16px;
                background-color: #ffffff;
                color: white;
            }

            @media only screen and (min-width: 450px) {
                width: 80%;
            }

        `; 

        return css;
    },

    generateHtml: function(widgetId) {
        var html = `
            <div class="${this.cssId}modal-widget" data-id="${widgetId}">
                <div class="${this.cssId}modal-content">
                    <div class="${this.cssId}modal-header">
                    <span class="${this.cssId}close">&times;</span>
                    
                    </div>
                    <div class="${this.cssId}modal-body">
                        <div class="pma-widget" data-id='${widgetId}'></div>
                    </div>
                    <div class="${this.cssId}modal-footer">
                    </div>
                </div>
            </div>
        `;
        return html; 
    },

}

docReady(function(){
    pmaWidgetInstance.initWidget("62bace1c524818ceae5c0498");
})

function docReady(fn) {
    if (document.readyState === "complete" || document.readyState === "interactive") {
        setTimeout(fn, 1);
    } else {
        document.addEventListener("DOMContentLoaded", fn);
    }
}