console.log("Starting")
var conditions = {};

function displayFeedback(i, success = false) {


    var feedbackArea = document.querySelector('#feedbackArea')
    window.scrollTo(0, 0);

    if (success) {
feedbackArea.style.color = 'green'

        feedbackArea.innerText = "Your request has been submitted."
    } else {

feedbackArea.style.color = 'red'

        i.json()
            .then(json=>feedbackArea.innerText = json.error + " " + (json.code ? "Error code: " + json.code : ""))


    }
}

var observer = new MutationObserver((mutations, me) => {
    var ft = document.querySelector('div[data-form-target="jlrhjekgbgnkletuekkcncjhhgfbklih"]');
    if (ft && !ft.dataset.initated) {
        ft.classList.add("support-ticket-form-loading")
        if (!ft.dataset.formName) return;
        ft.dataset.initated = true;

        //add styles
        var style = document.createElement('link');
        style.href = "https://us-central1-zendesk-functions.cloudfunctions.net/form-generator/style.css";
        style.rel = 'stylesheet';
        style.type = 'text/css';

        document.getElementsByTagName('head')[0].appendChild(style);

        function loadForm(formId, target) {
            //console.log("loadinng form", formId, "https://us-central1-zendesk-functions.cloudfunctions.net/form-generator")
            return fetch("https://us-central1-zendesk-functions.cloudfunctions.net/form-generator/conditions/" + formId)
                .then(r => {
                    if (r.ok) return r
                    throw r
                })
                .then(r => r.json())
                .then(conditionsJson => {
                    conditions[formId] = conditionsJson;
                })
                .then(() => {

                    var capchaTag = document.createElement('script');
                    capchaTag.src = "https://www.google.com/recaptcha/api.js?render=6LfLCt8UAAAAAG92TAKPokaWECaT7Xp00XA9aVKd";
                    document.getElementsByTagName('head')[0].appendChild(capchaTag);
                })
                .then(() => {
                    return fetch("https://us-central1-zendesk-functions.cloudfunctions.net/form-generator/form/" + formId)
                        .then(r => {
                            if (r.ok) return r
                            throw r
                        })
                        .then(r => r.text())
                        .then(b => target.innerHTML = b)
                })
                .then(() => {
                    var baseForm = document.createElement('script');
                    baseForm.src = "https://us-central1-zendesk-functions.cloudfunctions.net/form-generator/js/" + formId + ".js";
                    document.getElementsByTagName('head')[0].appendChild(baseForm);
                })
                .catch(e => {

                    displayFeedback(e)
                })
        };




        if (!ft.dataset.formName) return;
        fetch("https://us-central1-zendesk-functions.cloudfunctions.net/form-generator/metaform/" + ft.dataset.formName)
            .then(r => {
                if (r.ok) return r
                throw r
            })
            .then(r => r.json())
            .then(response => {
                ft.innerText = "";
                //add error area
                var feedbackArea = document.createElement('div');
                feedbackArea.id = "feedbackArea"
                ft.appendChild(feedbackArea)

                var intro = document.createElement('div')
                intro.innerText = "Please select your option below"
                intro.classList.add("support-ticket-intro")
                ft.appendChild(intro)
                response.options.forEach(option => {
                    var button = document.createElement("input");
                    button.type = "button";
                    button.value = option.display_name;
                    ft.appendChild(button);
                    button.onclick = e => {
                        // console.log("button clicked", e)
                        target.innerHTML = ""
                        target.classList.add("support-ticket-form-loading")
                        Array.from(ft.querySelectorAll(".active-form")).forEach(v=>v.classList.remove("active-form"))
                        button.classList.add("active-form")
                        loadForm(option.id, target)
                            .then(() => target.classList.remove("support-ticket-form-loading"))
                            .then(() => document.querySelector("#formId").value = response.tag)
                    };
                })

                var target = document.createElement('div')
                target.dataset.formTarget = 'jnjvdhvtilikllkrbnvkvclrjingcndf'
                ft.appendChild(target)

                ft.classList.remove("support-ticket-form-loading")
                // displayFeedback({code:"it no work"})

            })
            //autoselect form
            .then(() => {
                new URL(window.location.href).searchParams.forEach((value, key) => {

                    if (key == "selectForm" && document
                        .querySelector('div[data-form-target="jlrhjekgbgnkletuekkcncjhhgfbklih"]')
                        .querySelector('input[value="' + value + '"]')
                    ) {
                        document
                            .querySelector('div[data-form-target="jlrhjekgbgnkletuekkcncjhhgfbklih"]')
                            .querySelector('input[value="' + value + '"]').click()
                    }
                });
            })
            .catch(e => {
                displayFeedback(e)
            })
    };
    return;
});


observer.observe(document, {
    childList: true,
    subtree: true
});