define(["loading", "emby-checkbox", "emby-button", "emby-select"], function (loading) {
    "use strict";

    function save(page) {
        loading.show();
        var apiClient = ApiClient;
        apiClient.getJSON(apiClient.getUrl("Startup/Configuration")).then(function (config) {
            config.PreferredMetadataLanguage = page.querySelector("#selectLanguage").value;
            config.MetadataCountryCode = page.querySelector("#selectCountry").value;
            apiClient.ajax({
                type: "POST",
                data: config,
                url: apiClient.getUrl("Startup/Configuration")
            }).then(function () {
                loading.hide();
                navigateToNextPage();
            });
        });
    }

    function populateLanguages(select, languages) {
        var html = "";
        html += "<option value=''></option>";

        for (var i = 0, length = languages.length; i < length; i++) {
            var culture = languages[i];
            html += "<option value='" + culture.TwoLetterISOLanguageName + "'>" + culture.DisplayName + "</option>";
        }

        select.innerHTML = html;
    }

    function populateCountries(select, allCountries) {
        var html = "";
        html += "<option value=''></option>";

        for (var i = 0, length = allCountries.length; i < length; i++) {
            var culture = allCountries[i];
            html += "<option value='" + culture.TwoLetterISORegionName + "'>" + culture.DisplayName + "</option>";
        }

        select.innerHTML = html;
    }

    function reloadData(page, config, cultures, countries) {
        populateLanguages(page.querySelector("#selectLanguage"), cultures);
        populateCountries(page.querySelector("#selectCountry"), countries);
        page.querySelector("#selectLanguage").value = config.PreferredMetadataLanguage;
        page.querySelector("#selectCountry").value = config.MetadataCountryCode;
        loading.hide();
    }

    function reload(page) {
        loading.show();
        var apiClient = ApiClient;
        var promise1 = apiClient.getJSON(apiClient.getUrl("Startup/Configuration"));
        var promise2 = apiClient.getCultures();
        var promise3 = apiClient.getCountries();
        Promise.all([promise1, promise2, promise3]).then(function (responses) {
            reloadData(page, responses[0], responses[1], responses[2]);
        });
    }

    function navigateToNextPage() {
        Dashboard.navigate("wizardremoteaccess.html");
    }

    function onSubmit(e) {
        save(this);
        e.preventDefault();
        return false;
    }

    return function (view, params) {
        view.querySelector(".wizardSettingsForm").addEventListener("submit", onSubmit);
        view.addEventListener("viewshow", function () {
            document.querySelector(".skinHeader").classList.add("noHomeButtonHeader");
            reload(this);
        });
        view.addEventListener("viewhide", function () {
            document.querySelector(".skinHeader").classList.remove("noHomeButtonHeader");
        });
    };
});