const on = document.getElementById("on");
const off = document.getElementById("off");
const plugin_status = document.getElementById("status");

function edit_status() {    
    chrome.storage.local.get(['pluginEnabled'], function(result) {
        if (result.pluginEnabled === true) {
            chrome.storage.local.set({ pluginEnabled: false });
            plugin_status.innerHTML = "Plugin is disabled";
        } else if (result.pluginEnabled === false) {
            chrome.storage.local.set({ pluginEnabled: true });
            plugin_status.innerHTML = "Plugin is enabled";
        }
        console.log(result.pluginEnabled);
    });
}

function toggle_status() {
    on.classList.toggle("is-outlined");
    off.classList.toggle("is-outlined");
    edit_status();
}

function get_status() {
    chrome.storage.local.get(['pluginEnabled'], function(result) {
        if (result.pluginEnabled === true) {
            plugin_status.innerHTML = "Plugin is enabled";
        } else if (result.pluginEnabled === false) {
            plugin_status.innerHTML = "Plugin is disabled";
        }
        console.log(result.pluginEnabled);
    });
}

document.addEventListener("DOMContentLoaded", function() {
    chrome.storage.local.get(['pluginEnabled'], function(result) {
        if (result.pluginEnabled === undefined) {
            chrome.storage.local.set({ pluginEnabled: false });
        } else if (result.pluginEnabled === true) {
            off.classList.toggle("is-outlined");
        } else if (result.pluginEnabled === false) {
            on.classList.toggle("is-outlined");
        }
    });
    on.addEventListener("click", function() {
        toggle_status();
    });
    off.addEventListener("click", function() {
        toggle_status();
    });
    get_status(); 
});