let cookieGroups;
let gtmEvents;

document.addEventListener('DOMContentLoaded', function () {
    let panelButtons = document.querySelectorAll('[data-optin-button]');
    let showInfoButton = document.getElementsByClassName('qi_cookie_optin_details');
    let showInfoButtonIndicator = document.getElementsByClassName('qi_cookie_optin_arrow');
    let groupDescription = document.getElementsByClassName('group-description-container');
    let cookieModal = document.querySelectorAll('[data-optin-modal]')[0];
    let collapseButton = document.getElementsByClassName('qi_cookie_optin_collapseButton');
    let toggleModalButton = document.getElementsByClassName('qi_cookie_optin_toggle');

    try {
        cookieGroups = JSON.parse(document.getElementById('qi-cookie-optin').innerHTML);
        gtmEvents = [];
    } catch (err) {
        console.log('No cookie groups found! Please check the page id inside extension constants.')
    }

    if(cookieModal === undefined) return;

    // enable stuff by Cookie
    let cookieConsentData = cookieUtility.getCookie('QiCookieConsent');

    if (cookieConsentData !== null && cookieConsentData.length > 0) {
        let checkboxes = document.querySelectorAll('[data-optin-group]');
        let cookieConsentActiveGroups = cookieConsentData.split(',');

        for (let i = 0; i < cookieConsentActiveGroups.length; i++) {
            enableCookieGroup(cookieConsentActiveGroups[i]);
        }

        for (let i = 0; i < checkboxes.length; i++) {
            if (cookieConsentData.indexOf(checkboxes[i].value) !== -1) {
                checkboxes[i].checked = true;
            }
        }

        //push stored events(sored by enableCookieGroup) to gtm. We push this last so we are sure that gtm is loaded
        pushGtmEvents(gtmEvents);
        omTriggerPanelEvent(['cookieconsentscriptsloaded']);

        for (let i = 0; i < toggleModalButton.length; i++) {
            toggleModalButton[i].classList.toggle('active');
        }
    } else {
        //timeout, so the user can see the page before he get the nice cookie panel
        setTimeout(function () {
            cookieModal.parentElement.classList.toggle('active');
        }, 1000)
    }

    // check for button click
    for (let i = 0; i < panelButtons.length; i++) {
        panelButtons[i].addEventListener('click', saveCookie, false);
    }

    // toggle details
    for (let i = 0; i < showInfoButton.length; i++) {
        showInfoButton[i].addEventListener('click', function () {
            for (let i = 0; i < groupDescription.length; i++) {
                groupDescription[i].classList.toggle('active');
            }

            showInfoButtonIndicator[0].classList.toggle('up');
        });
    }

    // toggle collapse
    for (let i = 0; i < collapseButton.length; i++) {
        collapseButton[i].addEventListener('click', function () {
            let collapseBoxes = document.getElementsByClassName('qi_cookie_optin_table_wrapper');
            let tableWrapper = this.parentElement.querySelector('.qi_cookie_optin_table_wrapper');
            let isOpened = tableWrapper.classList.contains('active');

            for (let j = 0; j < collapseBoxes.length; j++) {
                collapseBoxes[j].classList.remove('active');
                collapseButton[j].innerHTML = '+'
            }

            if (isOpened) {
                tableWrapper.classList.remove('active');
                this.innerHTML = '+';
            } else {
                tableWrapper.classList.toggle('active');
                this.innerHTML = '-';
            }
        });
    }

    // toggle modal button
    for (let i = 0; i < toggleModalButton.length; i++) {
        toggleModalButton[i].addEventListener('click', function () {
            toggleModalButton[i].classList.toggle('active');
            cookieModal.parentElement.classList.toggle('active');
        })
    }
});

function saveCookie() {
    let action = this.getAttribute('data-optin-button');
    let checkboxes = document.querySelectorAll('[data-optin-group]');
    let toggleModalButton = document.getElementsByClassName('qi_cookie_optin_toggle');
    let cookie = '';
    let hasMediaGroup = false;

    switch (action) {
        case 'all':
            for (let i = 0; i < checkboxes.length; i++) {
                enableCookieGroup(checkboxes[i].value);
                cookie += checkboxes[i].value + ',';
                checkboxes[i].checked = true;

                if (checkboxes[i].hasAttribute('data-media')) {
                    hasMediaGroup = true;
                }
            }

            if (hasMediaGroup) {
                location.reload();
            }
            break;
        case 'save':
            for (let i = 0; i < checkboxes.length; i++) {
                if (checkboxes[i].checked === true) {
                    enableCookieGroup(checkboxes[i].value);
                    cookie += checkboxes[i].value + ',';

                    if (checkboxes[i].hasAttribute('data-media')) {
                        hasMediaGroup = true;
                    }
                }
            }
            location.reload();
            break;
        case 'min':
            for (let i = 0; i < checkboxes.length; i++) {
                if (checkboxes[i].getAttribute('data-optin-essential') !== null) {
                    enableCookieGroup(checkboxes[i].value);
                    cookie += checkboxes[i].value + ',';
                } else {
                    checkboxes[i].checked = false;
                }
            }
            location.reload();
            break;
    }

    cookie = cookie.slice(0, -1);
    cookieUtility.setCookie('QiCookieConsent', cookie, 364);

    if (hasMediaGroup) {
        cookieUtility.setCookie('QiCookieConsent_video', 1, 364);
    } else {
        if (cookieUtility.getCookie('QiCookieConsent_video')) {
            cookieUtility.deleteCookie('QiCookieConsent_video');
        }
    }

    //push stored events to gtm. We push this last so we are sure that gtm is loaded
    pushGtmEvents(gtmEvents);
    omTriggerPanelEvent(['cookieconsentsave', 'cookieconsentscriptsloaded']);

    setTimeout(function () {
        for (let i = 0; i < toggleModalButton.length; i++) {
            toggleModalButton[i].classList.toggle('active');
        }
        document.querySelectorAll('[data-optin-modal]')[0].parentElement.classList.toggle('active');
    }, 350)
}

function omTriggerPanelEvent(events) {
    events.forEach(function (event) {
        let eventObj = new CustomEvent(event, {bubbles: true});
        document.querySelectorAll('[data-optin-modal]')[0].dispatchEvent(eventObj);
    })
}

function pushGtmEvents(events) {
    window.dataLayer = window.dataLayer || [];
    events.forEach(function (event) {
        window.dataLayer.push({
            'event': event
        });
    });
}

function enableCookieGroup(groupKey) {
    if (cookieGroups[groupKey] !== undefined) {
        for (let key in cookieGroups[groupKey]) {
            // skip loop if the property is from prototype
            if (!cookieGroups[groupKey].hasOwnProperty(key)) continue;
            let obj = cookieGroups[groupKey][key];

            //save gtm event for pushing
            if (key === 'gtm') {
                if (cookieGroups[groupKey][key]) {
                    gtmEvents.push(cookieGroups[groupKey][key]);
                }
                continue;
            }

            //set the cookie html
            for (let prop in obj) {
                // skip loop if the property is from prototype
                if (!obj.hasOwnProperty(prop)) continue;

                if (Array.isArray(obj[prop])) {
                    let content = '';
                    let range = document.createRange();

                    //get the html content
                    obj[prop].forEach(function (htmlContent) {
                        content += htmlContent
                    });

                    if (prop === 'header') {
                        // add the html to header
                        range.selectNode(document.getElementsByTagName('head')[0]);
                        let documentFragHead = range.createContextualFragment(content);
                        document.getElementsByTagName('head')[0].appendChild(documentFragHead);
                    } else {
                        //add the html to body
                        range.selectNode(document.getElementsByTagName('body')[0]);
                        let documentFragBody = range.createContextualFragment(content);
                        document.getElementsByTagName('body')[0].appendChild(documentFragBody);
                    }
                }
            }
        }
        //remove the group so we don't set it again
        delete cookieGroups[groupKey];
    }
}

let cookieUtility = {
    getCookie: function (name) {
        let v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
        return v ? v[2] : null;
    },
    getCookieValue: function (cname) {
        var name = cname + '=';
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
            }
        }

        return '';
    },
    setCookie: function (name, value, days) {
        let d = new Date;
        d.setTime(d.getTime() + 24 * 60 * 60 * 1000 * days);
        document.cookie = name + "=" + value + ";path=/;expires=" + d.toUTCString();
    },
    deleteCookie: function (name) {
        this.setCookie(name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;');
    }
};

(function () {
    if (typeof window.CustomEvent === "function") return false;

    function CustomEvent(event, params) {
        params = params || {bubbles: false, cancelable: false, detail: null};
        let evt = document.createEvent('CustomEvent');
        evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
        return evt;
    }

    window.CustomEvent = CustomEvent;
})();
document.onreadystatechange = function() {
    if (document.readyState === 'complete') {
        let isAllowed = cookieUtility.getCookieValue('QiCookieConsent_video') === '1';
        let placeholderList = document.querySelectorAll('.qi_cookie_video-placeholder');
        let cookieModal = document.querySelectorAll('[data-optin-modal]')[0];
        let mediaGroup = document.querySelectorAll('.qi_cookie_optin_checkbox input[data-media="1"]');
        let iframes = document.querySelectorAll('iframe');

        placeholderList.forEach(function(placeholder) {
            let mediaFrame = placeholder.nextElementSibling;
            loadIframe(isAllowed, mediaFrame, placeholder, cookieModal, mediaGroup);
        });

        iframes.forEach(function (iframe) {
            console.log(iframe);
            if (iframe.previousElementSibling === null || !iframe.previousElementSibling.classList.contains('qi_cookie_video-placeholder')) {
                if (iframe.getAttribute('src') === '') {
                    let iframeWrapper = document.createElement('div');
                    let placeholder = document.createElement('div');

                    let width = iframe.getAttribute('width');
                    let height = iframe.getAttribute('height');

                    if (/^\d+$/.test(width)) {
                        width = width + 'px';
                    }

                    if (/^\d+$/.test(height)) {
                        height = height + 'px';
                    }

                    iframeWrapper.setAttribute('style', 'position: relative;' + 'width:' + width + ';' + 'height:' + height + ';');

                    placeholder.setAttribute('class', 'iframe-placeholder');
                    placeholder.textContent = 'Klicken Sie hier, um "Externe Medien" zu akzeptieren und diesen Inhalt zu aktivieren.';

                    iframe.before(iframeWrapper);
                    iframeWrapper.appendChild(placeholder);
                    iframeWrapper.appendChild(iframe);

                    loadIframe(isAllowed, iframe, placeholder, cookieModal, mediaGroup)
                }
            }
        })
    }
};

function loadIframe(isAllowed, mediaFrame, placeholder, cookieModal, mediaGroup) {
    if (mediaFrame.nodeName === 'IFRAME') {
        if (isAllowed) {
            mediaFrame.setAttribute('src', mediaFrame.getAttribute('data-src'));
            mediaFrame.setAttribute('style', 'display: block;');
            placeholder.setAttribute('style', 'display: none;');
        } else {
            placeholder.addEventListener('click', function(event) {
                if (mediaGroup.length > 0) {
                    // show cookie modal
                    cookieModal.parentElement.classList.add('active');
                } else {
                    mediaFrame.setAttribute('src', mediaFrame.getAttribute('data-src'));
                    mediaFrame.setAttribute('style', 'display: block;');
                    placeholder.setAttribute('style', 'display: none;');
                    cookieUtility.setCookie('QiCookieConsent_video', 1, 364);
                    event.preventDefault();
                }
            }, false);
        }
    }
}