if (!window.CountryPromoConsent) {
    window.CountryPromoConsent = class CountryPromoConsent {
        constructor(opts) {
            const SELECTORS = {
                messageContainer: ".msg-consent",
                countrySelector: ".country-dropdown",
                consentMsgTmpl: "#consentMsgTmpl",
                customCheckboxWrapper: ".custom-checkbox-wrapper",
                consentCheckbox: ".consent-checkbox",
                dataAttributes: "#data-attributes",
                formElement: ".form-element"
            };

            const EVENTS = {
                ON_CHANGE: "change",
            };

            const STRINGS = {
                EMPTY: "",
                CONSENT: "CONSENT",
                OPTOUT: "optout",
                OPTIN: "optin",
                NOTICE: "notice",
                REQUIRED: "required",
                FORMCHECKREQUIRED: "data-form-check-required"
            };

            let CONFIG = {
                compId: opts.compId
            };

            let ELEMENTS = {};

            let MAPS = {};

            const setupElements = (wrapper) => {
                ELEMENTS = {
                    ...ELEMENTS,
                    countryDropdown: wrapper.querySelector(SELECTORS.countrySelector),
                    consentMsgWrapper: wrapper.querySelector(SELECTORS.messageContainer),
                    isvForm: document.querySelector(SELECTORS.dataAttributes),
                };
                CONFIG.consentMsgTmpl = getTmplFromDom(STRINGS.CONSENT);
                CONFIG.formId = ELEMENTS.isvForm.dataset.formid
            };

            const evaluateTmpl = (tmpl, item) => {
                const keys = Object.keys(item);
                let $evaluatedTmpl = $(tmpl);
                keys.forEach((key) => {
                    const keyValue = item[key];
                    if (!keyValue || keyValue == STRINGS.EMPTY || keyValue.length == 0) {
                      $evaluatedTmpl.find(`[data-elementmarker="${key}"]`).remove();
                    }
                });

                // populate the modified template with the values.
                let evaluatedTmpl = $evaluatedTmpl.prop("outerHTML");

                keys.forEach((key) => {
                    evaluatedTmpl = replaceTemplateValues(evaluatedTmpl, key, item);
                });
                return evaluatedTmpl;
            };

            const replaceTemplateValues = (evaluatedTmpl, key, item) => {
                if(key === "type" && item[key] === STRINGS.OPTIN) {
                    evaluatedTmpl = evaluatedTmpl.replace(`checked="(#=checked#)"`, '');
                } else if(key === "type" && (item[key] === STRINGS.OPTOUT || item[key] === STRINGS.NOTICE)) {
                    evaluatedTmpl = evaluatedTmpl.replace("(#=checked#)", 'true');
                } else if(key === "type" && item[key] === '') {
                    evaluatedTmpl = evaluatedTmpl.replace("(#=type#)", 'empty');
                } else {
                    evaluatedTmpl = evaluatedTmpl.replace(`checked="(#=checked#)"`, '');
                }
                return evaluatedTmpl.replaceAll(`(#=${key}#)`, item[key] || STRINGS.EMPTY);
            };


            const getTmplFromDom = (whichTmpl) => {
                let tmplDOMSelector = STRINGS.EMPTY;
        
                switch (whichTmpl) {
                  case STRINGS.CONSENT:
                    tmplDOMSelector = `${SELECTORS.consentMsgTmpl}_${CONFIG.compId}`;
                    break;
                }
                return document.querySelector(tmplDOMSelector).innerHTML.toString().trim();
            };

            const countrySelectionHandler = (e) => {
                ELEMENTS.consentMsgWrapper.innerHTML = '';
                const selectedCountryCode = e.target.value.toUpperCase();
                const selectedCountry = MAPS.countryDetail.find(country => country.countryCode === selectedCountryCode);
                if (!selectedCountry) return;
                displayMessages(selectedCountry, selectedCountryCode);
            };

            const displayMessages = (selectedCountry, selectedCountryCode) => {
                const messages = selectedCountry.consentMessages.map(message => {
                    const consentKeyMsgData = MAPS.consentKeyMsg.find(consentKeyMsgData => consentKeyMsgData.key === message.key);
                    const combined = {...message,...consentKeyMsgData};
                    return evaluateTmpl(CONFIG.consentMsgTmpl, combined);
                }).join(" ");
                ELEMENTS.consentMsgWrapper.innerHTML = messages;

                const requiredConsentMessage = selectedCountry.consentMessages.find(message => message.required === true);

                if (requiredConsentMessage) {
                    const consentKey = requiredConsentMessage.key;
                    const consentCheckbox = document.querySelector(`#${consentKey}`); 
                    activateValidation(consentCheckbox);
                }
            };

            const activateValidation = (consentCheckbox) => {
                let validationInstance = new mwf.FormValidation({
                    el: document.querySelector(`#${CONFIG.formId}`),
                });
                consentCheckbox.setAttribute(STRINGS.REQUIRED, true);
                consentCheckbox.setAttribute(STRINGS.FORMCHECKREQUIRED, true);
                validationInstance.update();
            }
           
            this._init = (wrapper) => {
                setupElements(wrapper);
                ELEMENTS.countryDropdown.addEventListener(EVENTS.ON_CHANGE, countrySelectionHandler);
            };

            this.wrapper = opts.element;
            MAPS.consentKeyMsg = opts.consentKeyMsgJSON; 
            MAPS.countryDetail = opts.countryDetailJSON;
            this._init(this.wrapper);
        }
    }
}

countryPromoConsentInstances = [];