var ContactUsWidget = (function() {
    var widgetWrapper = document.getElementById("contactUsWidgetContainer");    //reference to the wrapper element
    var currentScript = document.getElementById("contactUsWidgetScript");       //reference to the embedding script

    var needToRun = function() {
        return (widgetWrapper != null && widgetWrapper.tagName == 'DIV' && currentScript != null);
    };

    if ( ! needToRun() ) {
        return false;
    }

    var roleType;
    var allowedRoleTypes = ["ads", "support"];
    var sourceDomain;                                   //the domain of the embedding site
    var backendUrl;                                     //%gotprofits host%/contact-us-form/send?...
    var form;                                           //reference to the form
    var messageContainer;                               //reference to the message container
    var recaptchaSiteKey;
    var needTermsOfUse;
    var siteName;
    var widgetTemplate;

    var init = function() {
        backendUrl = currentScript.src.split('/')[0] + "//" + currentScript.src.split('/')[2] + "/contact-us-form/send?callback=ContactUsWidget.jsonpCallback";     //dev/prod gotprofits url
        sourceDomain = window.location.hostname;    //the domain of the embedding page
        roleType = widgetWrapper.dataset.roleType;
        recaptchaSiteKey = widgetWrapper.dataset.recaptchaKey;
        needTermsOfUse = widgetWrapper.dataset.needTermsOfUse || false;
        siteName = widgetWrapper.dataset.siteName;
        widgetTemplate = buildTemplate();

        if ( ! validateRoleType() || ! validateRecaptchaKey() ) {
            return false;
        }

        return true;
    };

    var buildWidget = function() {
        if ( ! needTermsOfUse ) {
            termsOfUseTemplate = '';
        }

        widgetWrapper.innerHTML = widgetTemplate;
        form = document.getElementById("contactUsFrom");
        messageContainer = document.getElementById("contactUsMessage");

        setFormRoleTypeField();
        setFormSourceDomainField();

        insertRecaptcaScript();     //insert a script tag into the recaptchaContainer to get recaptcha api.js
        addRecaptcha();

        form.onsubmit = onSubmit;
    };

    var buildTemplate = function() {
        var termsOfUseTemplate = '';

        if ( needTermsOfUse ) {
            termsOfUseTemplate =
                '<div class="form-group">' +
                    '<input type="hidden" name="need-terms-of-use" value="true">' +
                    '<input type="checkbox" id="termsOfUse" name="terms-of-use">' +
                    '<label for="termsOfUse">I agree to ' + siteName + ' saving and processing my Name, IP address and email address for the purpose of personalisation and communication and also read and agree to the Terms & Conditions</label>' +
                '</div>';
        }

        var template =
            '<form id="contactUsFrom">' +
                '<div class="form-group required-field">' +
                    '<label for="contactUsEmailField">Email</label>' +
                    '<input id="contactUsEmailField" name="email" type="text" placeholder="Your email address" required="">' +
                '</div>' +
                '<div class="form-group required-field">' +
                    '<label for="contactUsMessageField">Message</label>' +
                    '<textarea id="contactUsMessageField" name="message" rows="4" placeholder="Describe your issue or question" required=""></textarea>' +
                    '<div class="help-block text-center">Please use English language for your messages. If you have a problem with English, you can use Google Translate' + '</div>' +
                '</div>' +
                '<div class="form-group">' +
                    '<div id="recaptchaContainer" class="g-recaptcha"></div>' +
                '</div>' +
                termsOfUseTemplate +
                '<div class="form-footer">' +
                    '<input id="contactUsRoleTypeField" name="role-type" type="hidden" value="">' +
                    '<input id="contactUsSourceDomainField" name="source-domain" type="hidden" value="">' +
                    '<input id="contactUsSubmitButton" name="submit" type="submit" value="Send" class="btn btn-block btn-primary">' +
                    '<div id="contactUsMessage" class="text-center"></div>' +
                '</div>' +
            '</form>';

        return template;
    };

    var addRecaptcha = function() {
        recaptchaWrapper = document.getElementById("recaptchaContainer");
        recaptchaWrapper.dataset.sitekey = recaptchaSiteKey;
    };

    var insertRecaptcaScript = function() {
        var recaptchaScript = document.createElement('script');

        recaptchaScript.setAttribute('src', "https://www.google.com/recaptcha/api.js");
        document.getElementById("recaptchaContainer").parentNode.appendChild(recaptchaScript);
    };

    var onSubmit = function(e) {
        e.preventDefault();

        var isRecaptchaVerified = grecaptcha.getResponse().length;
        if ( ! isRecaptchaVerified ) {
            showMessage("Please confirm that you are not a robot!", false);
            return false;
        }

        if ( ! validateEmailAddress(document.getElementById("contactUsEmailField").value)) {
            showMessage("Invalid email address!", false);
            return false;
        }

        if ( ! validateTermsOfUse(document.getElementById('termsOfUse')) ) {
            showMessage("The terms and conditions must be accepted.", false);
            return false;
        }

        document.getElementById("contactUsSubmitButton").disabled = true;

        fetchJSONP();
    };

    var fetchJSONP = function() {
        var script = document.createElement('script');
        var formDataAsQueryString = serializeFormData();

        script.setAttribute('src', backendUrl + "&" + formDataAsQueryString);
        document.body.appendChild(script);

        script.onload = function () {
            this.parentNode.removeChild(this);  //remove script tag after loaded
        };
    };

    var setFormRoleTypeField = function() {
        document.getElementById("contactUsRoleTypeField").value = roleType;
    };

    var setFormSourceDomainField = function() {
        document.getElementById("contactUsSourceDomainField").value = sourceDomain;
    };

    var validateEmailAddress = function(email) {
        var re = /\S+@\S+\.\S+/;
        return re.test(email);
    };

    var validateRoleType = function() {
        var isValid = true;

        if ( ! roleType ) {
            isValid = false;
            console.warn("ContactUsWidget: role type parameter not found!");
        } else if (allowedRoleTypes.indexOf(roleType) == -1) {
            isValid = false;
            console.warn("ContactUsWidget: invalid role type parameter: " + roleType);
        }

        return isValid;
    };

    var validateRecaptchaKey = function() {
        return recaptchaSiteKey != null;
    };

    var validateTermsOfUse = function(termsOfUseValueElement) {
        if ( ! needTermsOfUse ) {
            return true;
        }

        return termsOfUseValueElement === null ? false : termsOfUseValueElement.checked;
    };

    var serializeFormData = function() {
        var field, l, s = [];
        if (typeof form == 'object' && form.nodeName == "FORM") {
            var len = form.elements.length;
            for (var i = 0; i < len; i++) {
                field = form.elements[i];
                if (field.name && !field.disabled && field.type != 'file' && field.type != 'reset' && field.type != 'submit' && field.type != 'button') {
                    if (field.type == 'select-one') {
                        l = form.elements[i].options.length;
                        for (var j = 0; j < l; j++) {
                            if (field.options[j].selected)
                                s[s.length] = encodeURIComponent(field.name) + "=" + encodeURIComponent(field.options[j].text);
                        }
                    } else if ((field.type != 'checkbox' && field.type != 'radio') || field.checked) {
                        s[s.length] = encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value);
                    }
                }
            }
        }
        return s.join('&').replace(/%20/g, '+');
    };

    var showMessage = function(msg, isSuccessMessage) {
        var textNode = document.createTextNode(msg);

        messageContainer.innerHTML = "";
        messageContainer.appendChild(textNode);

        if (isSuccessMessage) {
            messageContainer.classList.remove("contact-us-message-container-error");
            messageContainer.classList.add("contact-us-message-container-success");
            messageContainer.classList.add("success-message");
        } else {
            messageContainer.classList.add("contact-us-message-container-error");
            messageContainer.classList.remove("contact-us-message-container-success");
        }
    };

    if (init()) {
        buildWidget();
    }

    const resetForm = function () {
        const inputs = document.querySelectorAll('#contactUsEmailField, #contactUsMessageField');

        inputs.forEach(function (input)  {
            input.value = '';
        });
    }

    return {
        jsonpCallback: function(response) {
            if (response.success) {
                showMessage("Thank you! Your message has been sent successfully!", true);
                resetForm()
                grecaptcha.reset();
            } else {
                document.getElementById("contactUsSubmitButton").disabled = false;
                showMessage(response.message, false);
                grecaptcha.reset();
            }
        }
    }
})();