let DoloresFormClient = function(params) {

        this.setEventsOnForm = function(form, submitSnippet = null) {
            form.addEventListener("submit", (e) => {
                e.preventDefault();

                let checkboxListFields = form.querySelectorAll("[data-field_type='checkbox_list']");

                for (let i = 0; i < checkboxListFields.length; ++i) {
                    let field = checkboxListFields[i];
                    let fieldLabel = field.getAttribute('data-field_label');
                    let validations = field.getAttribute('data-field_validations').split('|');

                    if (validations.includes("required")) {
                        let checkboxes = form.querySelectorAll('input[name="' + fieldLabel + '[]"]');
                        let checkedOne = Array.prototype.slice.call(checkboxes).some(x => x.checked);
                        let errorDiv = form.querySelector('#error_' + fieldLabel);

                        if (!checkedOne) {
                            errorDiv.innerHTML = 'Please select at least one option.';
                            return false;
                        } else {
                            errorDiv.innerHTML = '';
                        }
                    }

                }

                let formData = new FormData(form);
                let actionPath = form.getAttribute("action");
                let xhr = new XMLHttpRequest();
                xhr.open("POST", actionPath);
                xhr.send(formData);

                let submitButton = form.querySelector('.emailFormSubmitButton');
                submitButton.disabled = true;
                submitButton.value = 'Submitted';

                if (submitSnippet) {
                    form.classList.add("hiddenContainer");
                    submitSnippet.classList.remove("hiddenContainer");
                }

            }, false);
        };

        this.populate = function() {

            let containers = document.querySelectorAll(".emailFormContainer");

            if (!containers.length) {
                console.log("Dolores: No matching containers.");
                return;
            }

            for (let i = 0; i < containers.length; ++i) {
                let container = containers[i];

                let form = container.querySelector('.emailForm');
                let submitSnippet = container.querySelector('.emailFormSubmitSnippetContainer');
                if (form) {
                    this.setEventsOnForm(form, submitSnippet);
                    continue;
                }

                let hash = container.getAttribute('data-hash');

                let endpoint = 'https://dolores.somespider.com/email_form/get' + '/' + hash;
                let request = new XMLHttpRequest();
                request.open('GET', endpoint, true);

                let self = this;

                request.onload = function() {
                    if (this.status >= 200 && this.status < 400) {
                        let data = JSON.parse(this.response);

                        container.innerHTML = data.css + data.html;

                        let form = container.querySelector('.emailForm');
                        let submitSnippet = container.querySelector('.emailFormSubmitSnippetContainer');

                        self.setEventsOnForm(form, submitSnippet);

                    } else {
                        console.log('Dolores Error: Bad HTTP code in response.');
                    }
                };

                request.onerror = function() {
                    console.log("Dolores Error: Could not connect to endpoint.");
                };

                request.send();

            }
        };
    };

    let ssDfc = new DoloresFormClient();

    document.addEventListener("DOMContentLoaded", function() {
        ssDfc.populate();
    });