/* Rule no. 1 in ES6 is to first add the modules. */
import {modifyDatabaseEntry, syncWithServer, setHighlightedText} from "../auto_store.js";

/* Get categories array from storage DB */
var categories = browser.storage.local.get("category").then((categoryArray) => {getCategories(categoryArray["category"]);});

/* Add event listeners to some buttons*/
const textareaListener = document.getElementById("atn");
textareaListener.addEventListener("click", checkAnnotationText, false);

const closeListener = document.getElementById("ctn");
closeListener.addEventListener("click", function(){window.close()}, false);

/* Display any highlighted text */

/* Generic error handler */
function onError(error){
  console.log(error)
}

/* Get promised categories and display them as checkboxes */
function getCategories(item){
    if(item != undefined){
        var categories = item;
    }
    /* Loop through all category objects and create HTML radio buttons for them*/
    var text, fLen, i;
    fLen = categories.length;
    text = "<form>";
     
    for (i = 0; i < fLen; i++){
      text += "<input type=\x22checkbox\x22 id=\x22" + categories[i] + "\x22 name=\x22category\x22 value=\x22" + categories[i] + "\x22> <label for=\x22" + categories[i] + "\x22>"+ categories[i] + "</label><br>";
    }
    // HTML format the looped through categories array
    text += "<input type=\x22button\x22 id=\x22btn\x22 value=\x22Save to Selected Category\x22></form>";
    
    // Display loop of categories
    document.getElementById("main").innerHTML = text;

    // Event listeners
    const checkboxListener = document.getElementById("btn");
    checkboxListener.addEventListener("click", checkCheckboxValues, false);

    // Display the annotations box 
    //displayHighlightedText();
    // Return stuff
    return categories;
}


// Fetch checkbox values
function checkCheckboxValues(){
    let rbs = document.querySelectorAll('input[name="category"]:checked');
    let selectedCategories = [];
    
    for(var i=0; i < rbs.length; i++){
        console.log("Checked is: ", rbs[i].value);
        selectedCategories.push(rbs[i].value);
    }
    console.log("Checkbox's selected values: ", selectedCategories);
    
    //saveSelectedTextToCategory(selectedValues);
    modifyDatabaseEntry("category", selectedCategories);
    //window.close();
}

function checkAnnotationText(){
    var annotation = document.getElementById("annotation").value;
    console.log("Received annotation text: ", annotation);

    /* Save to DB */
    modifyDatabaseEntry("annotation", annotation);
}


/* Display the selected text in the HTML popup.
function displayHighlightedText(){
    var highlightedText = setHighlightedText("get");
    var markedField = "<h5>Highlighted text</h5><br>" + highlightedText;
    document.getElementById("markedField").innerHTML = markedField;
}*/ 


/*Save text under the chosen category/categories to local.storage
function saveSelectedTextToCategory(checkboxValues){
    // Reach auto_store.js functions 
    // modifyDatabaseEntry("category", checkboxValues);

    // Loop through the selected categories 
    for(var i=0; i < checkboxValues.length; i++){
        console.log("Checked is: ", checkboxValues[i].value);
    }
}*/