(function (root, factory) {
    // Browser globals
    root.UnitConverter = factory();
}(typeof self !== "undefined" ? self : this, function () {

    let basePath = null;
    let category = "unit";

    function conversionForm() {
        document.getElementById("convert").addEventListener("submit", function (e) {
            e.preventDefault();

            let form = this;
            let inputKeys = ["input", "from", "to"];

            let elements = inputKeys.map(function (key) {
                let input = form.elements[key];
                return {
                    input: input,
                    errorLabel: input.nextElementSibling,
                    errorMessage: null,
                    value: input.value.trim()
                };
            });

            elements[0].sanitizedValue = elements[0].value.trim();

            let hasError = false;
            if (elements[0].value == "") {
                hasError = true;
                elements[0].errorMessage = "Please enter a number to convert";
            } else if (elements[0].value != "" && elements[0].sanitizedValue == "") {
                hasError = true;
                elements[0].errorMessage = "Input may contain only numbers and dot";
            }

            if (elements[1].value == "null") {
                hasError = true;
                elements[1].errorMessage = "Please select unit";
            }
            if (elements[2].value == "null") {
                hasError = true;
                elements[2].errorMessage = "Please select unit";
            }
            if (elements[1].value != "null" && elements[1].value == elements[2].value) {
                hasError = true;
                elements[1].errorMessage = "";
                elements[2].errorMessage = "Unit must not be the same";
            }

            elements.forEach(function (el) {
                if (el.input.classList.contains("is-invalid")) {
                    el.input.classList.remove("is-invalid");
                }
                el.errorLabel.style.display = "none";
            });

            if (hasError) {
                elements.forEach(function (el) {
                    if (el.errorMessage) {
                        if (!el.input.classList.contains("is-invalid")) {
                            el.input.classList.add("is-invalid");
                        }
                        el.errorLabel.innerText = el.errorMessage;
                        el.errorLabel.style.display = "inline";
                    }
                });
            } else {
                let url = basePath + "/" + elements[1].value + "-to-" + elements[2].value;
                if (category == "unit") {
                    url += "/" + elements[0].sanitizedValue;
                } else {
                    throw new Error("Invalid category");
                }
                window.location = url;
            }
        });
    }

    function customChartTable() {

        MyEvent.addEventListener("submit", "#chart-table-form", function (e) {
            e.preventDefault();
            let form = e.target;

            let chartTable = document.getElementById("met-chart-table");
            let loadingIndicator = new FormUtils.LoadingIndicator(form);

            Fetch.post({
                url: form.action,
                method: form.method,
                responseType: "json",
                data: form,
                success: function (data) {
                    if (data.status == 1) {
                        let button = document.getElementsByClassName("js-show-full-table")[0];
                        if (button) {
                            button.remove();
                        }
                    }
                    let tbody = chartTable.children[1];
                    tbody.innerHTML = data.message;
                },
                complete: function () {
                    chartTable.style.opacity = 1;
                    loadingIndicator.onComplete();
                },
                before: function () {
                    chartTable.style.opacity = 0.5;
                    loadingIndicator.onBefore();
                },
                error: function (name, message) {
                    console.log(name, message);
                }
            });
        });
    }

    function initIndexPage(b) {
        basePath = b;
        document.addEventListener("DOMContentLoaded", function (e) {
            conversionForm();
        });
    }

    function initConvertPage(b) {
        basePath = b;
        document.addEventListener("DOMContentLoaded", function (e) {
            conversionForm();
            customChartTable();
        });
    }

    return {
        initConvertPage: initConvertPage,
        initIndexPage: initIndexPage
    };
}));