let settings_dict = {},
    tab_settings = {},
    reload_button,
    active_tab;

function get_i18n_string(key) {
    if (chrome && chrome.i18n && chrome.i18n.getMessage) {
        return chrome.i18n.getMessage(key);
    } else if (browser && browser.i18n && browser.i18n.getMessage) {
        return browser.i18n.getMessage(key);
    } else {
        console.error("Can't get i18n message: " + key);
    }
}

function set_sync_storage(key) {
    if (
        chrome &&
        chrome.storage &&
        chrome.storage.sync &&
        chrome.storage.sync.set
    ) {
        chrome.storage.sync.set(key);
    } else if (
        browser &&
        browser.storage &&
        browser.storage.sync &&
        browser.storage.sync.set
    ) {
        browser.storage.sync.set(key);
    } else {
        console.error("Can't set settings.");
    }
}

function get_sync_storage(key, callback) {
    if (
        chrome &&
        chrome.storage &&
        chrome.storage.sync &&
        chrome.storage.sync.get
    ) {
        chrome.storage.sync.get(key, callback);
    } else if (
        browser &&
        browser.storage &&
        browser.storage.sync &&
        browser.storage.sync.get
    ) {
        browser.storage.sync.get(key, callback);
    } else {
        console.error("Couldn't read setting: " + key);
    }
}

function add_storage_change_listener(listener) {
    if (
        chrome &&
        chrome.storage &&
        chrome.storage.onChanged &&
        chrome.storage.onChanged.addListener
    ) {
        chrome.storage.onChanged.addListener(listener);
    } else if (
        browser &&
        browser.storage &&
        browser.storage.onChanged &&
        browser.storage.onChanged.addListener
    ) {
        browser.storage.onChanged.addListener(listener);
    } else {
        console.error("Couldn't add setting change listener");
    }
}

function reload_tab(tab, callback) {
    if (chrome && chrome.tabs && chrome.tabs.reload) {
        chrome.tabs.reload(tab, callback);
    } else if (browser && browser.tabs && browser.tabs.reload) {
        browser.tabs.reload(tab, callback);
    } else {
        console.error("Couldn't reload tab.");
    }
}

function dict_equality(dict1, dict2) {
    let is_equal = true;

    for (var k in dict1) {
        if (Object.prototype.hasOwnProperty.call(dict1, k)) {
            is_equal = is_equal && dict1[k] === dict2[k];
        }
    }

    for (let k in dict2) {
        if (Object.prototype.hasOwnProperty.call(dict2, k)) {
            is_equal = is_equal && dict1[k] === dict2[k];
        }
    }

    return is_equal;
}

function on_settings_change_intent() {
    let is_different = !dict_equality(settings_dict, tab_settings);

    console.log(settings_dict);
    console.log(tab_settings);
    console.log(is_different);

    if (reload_button !== undefined) {
        reload_button.disabled = !is_different;
    }
}

function bind_boolean_setting(checkbox_elem) {
    let name = checkbox_elem.name,
        default_val = checkbox_elem.checked,
        get_obj = {},
        label = checkbox_elem.nextSibling;

    label.textContent = get_i18n_string("settings_" + name);

    get_obj[name] = default_val;

    get_sync_storage(get_obj, function (items) {
        checkbox_elem.checked = items[name] === checkbox_elem.value;
        settings_dict[name] = items[name];
        on_settings_change_intent();
    });

    add_storage_change_listener(function (changes) {
        if (Object.prototype.hasOwnProperty.call(changes, name)) {
            checkbox_elem.checked =
                changes[name].newValue === checkbox_elem.value;
            settings_dict[name] = changes[name].newValue;
            on_settings_change_intent();
        }
    });

    checkbox_elem.addEventListener("click", function () {
        let setting = {};
        setting[name] = checkbox_elem.checked ? "on" : "";
        settings_dict[name] = setting[name];
        on_settings_change_intent();

        set_sync_storage(setting);
    });
}

function bind_settings_apply_button(elem) {
    elem.textContent = get_i18n_string("action_" + elem.id);
    elem.disabled = true;

    elem.addEventListener("click", function () {
        reload_tab(active_tab.id, function () {
            window.setInterval(query_current_tab, 1000);
        });
    });

    reload_button = elem;
}

/**
 * Promise-based version of `chrome.tabs.query`.
 *
 * Mozilla does this by default in `browser.tabs` but Chrome is behind on this
 * sort of thing. Chrome won't even let us check if we're running in
 */
function tab_query() {
    let my_args = arguments;

    if (window.browser && browser.tabs && browser.tabs.query) {
        return browser.tabs.query.apply(this, arguments);
    }

    return new Promise(function (resolve) {
        let new_arguments = Array.prototype.slice.call(my_args);
        new_arguments.push(resolve);
        chrome.tabs.query.apply(this, new_arguments);
    });
}

/**
 * Promise-based version of `chrome.tabs.sendMessage`.
 */
function tab_sendmessage() {
    let my_args = arguments;

    if (window.browser && browser.tabs && browser.tabs.sendMessage) {
        return browser.tabs.sendMessage.apply(this, arguments);
    }

    return new Promise(function (resolve, reject) {
        let new_arguments = Array.prototype.slice.call(my_args);
        new_arguments.push(function (response) {
            if (chrome.runtime.lastError !== undefined) {
                reject(chrome.runtime.lastError.message);
            }

            resolve(response);
        });
        chrome.tabs.sendMessage.apply(this, new_arguments);
    });
}

async function query_current_tab() {
    let ruffle_status = document.getElementById("ruffle_status");
    if (ruffle_status === null) {
        /*debugger;*/
    }

    ruffle_status.textContent = get_i18n_string("status_init");
    let tabs = null;

    try {
        tabs = await tab_query({
            currentWindow: true,
            active: true,
        });

        if (tabs.length < 1) {
            ruffle_status.textContent = get_i18n_string("status_no_tabs");
            return;
        }

        if (tabs.length > 1) {
            console.warn(
                "Got " + tabs.length + " tabs in response to active tab query"
            );
        }
    } catch (e) {
        ruffle_status.textContent = get_i18n_string("status_tabs_error");
        throw e;
    }

    try {
        active_tab = tabs[0];

        ruffle_status.textContent = get_i18n_string("status_message_init");

        let resp = await tab_sendmessage(active_tab.id, {
            action: "get_page_options",
        });
        console.log(resp);

        tab_settings = resp.tab_settings;
        on_settings_change_intent();

        if (resp !== undefined && resp.loaded) {
            ruffle_status.textContent = get_i18n_string(
                "status_result_running"
            );
        } else if (resp !== undefined && !resp.loaded) {
            if (tab_settings.ruffle_enable === "on") {
                ruffle_status.textContent = get_i18n_string(
                    "status_result_optout"
                );
            } else {
                ruffle_status.textContent = get_i18n_string(
                    "status_result_disabled"
                );
            }
        } else {
            ruffle_status.textContent = get_i18n_string("status_result_error");
        }
    } catch (e) {
        ruffle_status.textContent = get_i18n_string("status_result_protected");
        if (reload_button) {
            reload_button.disabled = true;
        }
        throw e;
    }
}

function open_settings_page() {
    if (chrome && chrome.tabs && chrome.tabs.create) {
        chrome.tabs.create({ url: "/settings.htm" });
    } else if (browser && browser.runtime && browser.runtime.openOptionsPage) {
        browser.runtime.openOptionsPage();
    } else {
        console.error("Can't open settings page");
    }
}

document.addEventListener("DOMContentLoaded", function () {
    var settings_button = document.getElementById("settingsbutton");
    bind_boolean_setting(document.getElementById("ruffle_enable"));
    bind_boolean_setting(document.getElementById("ignore_optout"));
    bind_settings_apply_button(document.getElementById("reload"));
    settings_button.innerHTML = get_i18n_string("open_settings_page");
    settings_button.onclick = open_settings_page;

    query_current_tab();
});