var rules = ["followers", "following", "tweets"];

function loadAllTags(openLastLi = false) {
    $(".collapsible li ").remove();
    chrome.storage.local.get("highlightSettings", function(settings) {
        if (settings.highlightSettings == undefined)
            settings.highlightSettings = {};
        var settings = settings.highlightSettings;
        $.each(settings, function(index, value) {
            var appendedElement = $('<li>' +
                '<div class="collapsible-header ">' +
                '<div><span style="background:' + value.background + ';padding:6px;">H</span></div>' + value.name + '</div>' +
                '<div class="collapsible-body ">' +
                '<div class="row">' +
                '<form class="col s12">' +
                '<input type="hidden" class="id" value="' + index + '" />' +
                '<div class="row">' +
                '<div class="input-field col s12">' +
                '<input class="name" id="name" type="text" class="validate" value="' + value.name + '">' +
                '<label for="name">Name</label>' +
                '</div>' +
                '</div>' +
                '<div class="row">' +
                '<div class="input-field col s3">' +
                '<label>Followers</label>' +
                '</div>' +
                '<div class="input-field col s5">' +
                '<select id="followers_compare_type">' +
                '<option value="1">greater than</option>' +
                '<option value="2">fewer than</option>' +
                '<option value="3">equal to</option>' +
                '</select>' +
                '</div>' +
                '<div class="input-field col s4">' +
                '<input class="name" id="followers_num" type="number" class="validate">' +
                '</div>' +
                '</div>' +
                '<div class="row">' +
                '<div class="input-field col s3">' +
                '<label>Following</label>' +
                '</div>' +
                '<div class="input-field col s5">' +
                '<select id="following_compare_type">' +
                '<option value="1">greater than</option>' +
                '<option value="2">fewer than</option>' +
                '<option value="3">equal to</option>' +
                '</select>' +
                '</div>' +
                '<div class="input-field col s4">' +
                '<input class="name" id="following_num" type="number" class="validate">' +
                '</div>' +
                '</div>' +
                '<div class="row">' +
                '<div class="input-field col s3">' +
                '<label>Tweets</label>' +
                '</div>' +
                '<div class="input-field col s5">' +
                '<select id="tweets_compare_type">' +
                '<option value="1">greater than</option>' +
                '<option value="2">fewer than</option>' +
                '<option value="3">equal to</option>' +
                '</select>' +
                '</div>' +
                '<div class="input-field col s4">' +
                '<input class="name" id="tweets_num" type="number" class="validate">' +
                '</div>' +
                '</div>' +
                '<div class="row">' +
                '<div class="input-field col s4">' +
                '<label>Background</label>' +
                '</div>' +
                '<div class="input-field col s4">' +
                '<input type="text" class="color" style="display:none" value="' + value.background + '" />' +
                '<div class="picker"></div>' +
                '</div>' +
                '</div>' +
                '<div class="row">' +
                '<div class="input-field col s12">' +
                '<a class="waves-effect waves-light btn save">Save</a>' +
                '<a class="waves-effect waves-light btn red delete" style="position:absolute;right:0;">Delete</a>' +
                '</div>' +
                '</div>' +
                '</form>' +
                '</div>' +
                '</div>' +
                '</li>').appendTo(".collapsible");
            $(appendedElement.find(".picker")).farbtastic($(appendedElement.find(".color")));
            for (var rule of rules) {
                appendedElement.find("#" + rule + "_compare_type").val(value[rule]["type"]);
                appendedElement.find("#" + rule + "_num").val(value[rule]["num"]);
            }
        });
        Materialize.updateTextFields();
        $("select").material_select();
        if (openLastLi) {
            $(".collapsible").collapsible('open', $(".collapsible>li").length - 1);
        }
    });
}

$("ul").on("click", ".save", function() {
    var form = $(this).parents("form");
    var id = form.find(".id").val();
    var element = {};
    element["name"] = form.find(".name").val();
    for (var rule of rules) {
        element[rule] = {};
        element[rule]["type"] = form.find("#" + rule + "_compare_type").val();
        element[rule]["num"] = form.find("#" + rule + "_num").val();
    }
    console.log(element);
    element["background"] = form.find(".color").val();
    chrome.storage.local.get("highlightSettings", function(settings) {
        if (settings.highlightSettings == undefined)
            settings.highlightSettings = {};
        var settings = settings.highlightSettings;
        console.log(settings, element);
        settings[id] = element;
        console.log(settings);
        chrome.storage.local.set({
            "highlightSettings": settings
        })
        loadAllTags();
    });
});

$("ul").on("click", ".delete", function() {
    var form = $(this).parents("form");
    var id = form.find(".id").val();
    chrome.storage.local.get("highlightSettings", function(settings) {
        if (settings.highlightSettings == undefined)
            settings.highlightSettings = {};
        var settings = settings.highlightSettings;
        delete settings[id];
        chrome.storage.local.set({
            "highlightSettings": settings
        });
        loadAllTags();
    });
});

$(".add").click(function() {
    chrome.storage.local.get("highlightSettings", function(settings) {
        if (settings.highlightSettings == undefined)
            settings.highlightSettings = {};
        var settings = settings.highlightSettings;
        var id = parseInt(Object.keys(settings).slice(-1)) + 1;
        if (isNaN(id))
            id = 1;
        settings[id] = {
            "name": "",
            "background": "#ffffff",
            "followers": {
                "type": 1,
                "num": 0
            },
            "following": {
                "type": 1,
                "num": 0
            },
            "tweets": {
                "type": 1,
                "num": 0
            }
        };
        chrome.storage.local.set({
            "highlightSettings": settings
        });
        loadAllTags(true);
    });
});

$(document).ready(function() {
    loadAllTags();
});