$(document).ready(function () {
    buildNavigation(false);
    showRegister();
});

function buildLogin() {
    var container = document.getElementById("container");

    var formContainer = document.createElement("div");
    formContainer.id = "login_form";

    var title = document.createElement("div");
    title.className = "form_title";
    title.textContent = "LOGIN TO YOUR ACCOUNT";

    var form = document.createElement("form");
    form.action = "javascript: login()";

    var usernameInput = document.createElement("input");
    usernameInput.type = "text";
    usernameInput.id = "login_username";
    usernameInput.placeholder = "Username";

    var passwordInput = document.createElement("input");
    passwordInput.type = "password";
    passwordInput.id = "login_password";
    passwordInput.placeholder = "Password";

    var submitBtn = document.createElement("input");
    submitBtn.type = "submit";
    submitBtn.value = "LOGIN";

    form.append(usernameInput);
    form.append(passwordInput);
    form.append(submitBtn);

    formContainer.append(title);
    formContainer.append(form);

    container.append(formContainer);
}

function buildRegister() {
    var container = document.getElementById("container");

    var formContainer = document.createElement("div");
    formContainer.id = "register_form";

    var title = document.createElement("div");
    title.className = "form_title";
    title.textContent = "REGISTER A NEW ACCOUNT";

    var form = document.createElement("form");
    form.action = "javascript: register()";

    var usernameInput = document.createElement("input");
    usernameInput.type = "text";
    usernameInput.id = "login_username";
    usernameInput.placeholder = "Username";

    var emailInput = document.createElement("input");
    emailInput.type = "text";
    emailInput.id = "login_email";
    emailInput.placeholder = "Email";

    var passwordInput = document.createElement("input");
    passwordInput.type = "password";
    passwordInput.id = "login_password";
    passwordInput.placeholder = "Password";

    var passwordConfirmInput = document.createElement("input");
    passwordConfirmInput.type = "password";
    passwordConfirmInput.id = "login_confirm_password";
    passwordConfirmInput.placeholder = "Password (Confirm)";

    var submitBtn = document.createElement("input");
    submitBtn.type = "submit";
    submitBtn.value = "REGISTER";

    form.append(usernameInput);
    form.append(emailInput);
    form.append(passwordInput);
    form.append(passwordConfirmInput);
    form.append(submitBtn);

    formContainer.append(title);
    formContainer.append(form);

    container.append(formContainer);
}

function buildHome() {
    buildPageStructure();

    buildProjectsActions(false);
    buildTaskActions(false);

    buildProjectList();
    buildTaskList();

    selectProject(0);
}

function buildPageStructure() {
    var container = document.getElementById("container");

    var projects = document.createElement("div");
    projects.id = "projects";

    var projectsTitle = document.createElement("span");
    projectsTitle.className = "section_title";
    projectsTitle.innerText = "PROJECTS";

    var projectsActions = document.createElement("div");
    projectsActions.className = "section_actions";
    projectsActions.id = "project_actions";

    var projectList = document.createElement("ul");
    projectList.id = "project_list";

    projects.append(projectsTitle);
    projects.append(projectsActions);
    projects.append(projectList);

    /*                              */

    var tasks = document.createElement("div");
    tasks.id = "tasks";

    var tasksTitle = document.createElement("span");
    tasksTitle.className = "section_title";
    tasksTitle.innerText = "TASKS";

    var taskActions = document.createElement("div");
    taskActions.className = "section_actions";
    taskActions.id = "task_actions";

    var todoTaskList = document.createElement("ul");
    todoTaskList.id = "todo_tasks";

    var completedTitle = document.createElement("span");
    completedTitle.className = "section_title";
    completedTitle.innerText = "COMPLETED";

    var completedTaskList = document.createElement("ul");
    completedTaskList.id = "completed_tasks";

    tasks.append(tasksTitle);
    tasks.append(taskActions);
    tasks.append(todoTaskList);
    tasks.append(document.createElement("br"));
    tasks.append(completedTitle);
    tasks.append(completedTaskList);

    container.append(projects);
    container.append(tasks);
}

function buildNavigation(logged) {
    var nav = document.getElementById("nav_list");
    $("#nav_list").empty();

    if (logged) {
        nav.append(buildNavButton("HOME", "javascript: showHome()"));
        nav.append(buildNavButton("ACCOUNT", "javascript: showAccount()"));
        nav.append(buildNavButton("LOGOUT", "javascript: logout()"));
    } else {
        nav.append(buildNavButton("LOGIN", "javascript: showLogin()"));
        nav.append(buildNavButton("REGISTER", "javascript: showRegister()"));
    }

}

function buildNavButton(name, url) {

    var li = document.createElement("li");
    var a = document.createElement("a");
    a.href = url;
    a.innerText = name;

    li.append(a);
    return li;
}

/**
 * Creates an icon with an URL action (anchor),
 * receives action url and image url.
 */
function buildAction(url, image) {

    var a = document.createElement("a");

    var img = document.createElement("img");
    img.src = image

    if (url !== "") {
        a.href = url;
    }

    a.append(img);
    return a;
}

/**
 * Builds the title actions on the projects list.
 * This included loading the icons and respective action URLs,
 * depending on the "selected" parameter, this determines if a project
 * is selected.
 */
function buildProjectsActions(selected) {

    var actionsContainer = $("#project_actions");
    actionsContainer.empty();

    actionsContainer.append(buildAction("javascript: addNewProject()", "/static/images/icon_add.png"));

    if (selected) {
        actionsContainer.append(buildAction("javascript: editSelectedProject()", "/static/images/icon_edit.png"));
        actionsContainer.append(buildAction("javascript: deleteSelectedProject()", "/static/images/icon_delete.png"));
    } else {
        actionsContainer.append(buildAction("", "/static/images/icon_edit_faded.png"));
        actionsContainer.append(buildAction("", "/static/images/icon_delete_faded.png"));
    }
}

/**
 * Builds the title actions on the to-do tasks list.
 * This included loading the icons and respective action URLs,
 * depending on the "selected" parameter, this determines if a task
 * is selected.
 */
function buildTaskActions(selected) {
    var actionsContainer = $("#task_actions");
    actionsContainer.empty();

    if (selected) {
        var completion = buildAction("javascript: changeCompletion()", "/static/images/icon_complete.png");
        completion.id = "completion_action";

        actionsContainer.append(completion);
        actionsContainer.append(buildAction("javascript: moveTask(1)", "/static/images/icon_up.png"));
        actionsContainer.append(buildAction("javascript: moveTask(-1)", "/static/images/icon_down.png"));
    } else {
        actionsContainer.append(buildAction("", "/static/images/icon_complete_faded.png"));
        actionsContainer.append(buildAction("", "/static/images/icon_up_faded.png"));
        actionsContainer.append(buildAction("", "/static/images/icon_down_faded.png"));
    }

    var sep = document.createElement("div");
    sep.className = "actions_seperator";
    actionsContainer.append(sep);

    actionsContainer.append(buildAction("javascript: addNewTask()", "/static/images/icon_add.png"));

    if (selected) {
        actionsContainer.append(buildAction("javascript: editSelectedTask()", "/static/images/icon_edit.png"));
        actionsContainer.append(buildAction("javascript: deleteSelectedTask()", "/static/images/icon_delete.png"));
    } else {
        actionsContainer.append(buildAction("", "/static/images/icon_edit_faded.png"));
        actionsContainer.append(buildAction("", "/static/images/icon_delete_Faded.png"));
    }
}

/**
 * Builds the list of projects displayed on the left side.
 */
function buildProjectList() {
    var tempArray = [{ 'title': 'Projeto PI', 'date': '13/06/2018 18:32' }, { 'title': 'Neural Net Test', 'date': '13/06/2018 18:32' }]; /*<-------------------------------------------- replace later */

    var list = $("#project_list");
    list.empty();

    for (var i = 0; i < tempArray.length; i++) {
        var a = document.createElement("a");
        a.href = "javascript: selectProject(" + i + ")";

        var li = document.createElement("li");

        var title = document.createElement("div");
        title.className = "project_title";
        title.textContent = tempArray[i]['title'];

        var date = document.createElement("div");
        date.className = "project_last_updated";
        date.textContent = tempArray[i]['date'];

        li.append(title);
        li.append(date);

        a.append(li);
        list.append(a);
    }
}

/**
 * Builds the list of tasks displayed on the right side.
 */
function buildTaskList() {
    var tempArray = [
        { 'title': 'Terminar HTML da tabela de sessões', 'date': 'Due: 20/06/2018 00:00', 'completed': true },
        { 'title': 'Implementar POST de utilizadores', 'date': 'Due: 20/06/2018 00:00', 'completed': false }]; /*<-------------------------------------------- replace later */

    var todoList = $("#todo_tasks");
    todoList.empty();

    var completedList = $("#completed_tasks");
    completedList.empty();

    var todoCount = 0;
    var completedCount = 0;

    for (var i = 0; i < tempArray.length; i++) {
        var a = document.createElement("a");
        a.href = "javascript: selectTask(" + (tempArray[i]['completed'] ? completedCount : todoCount) + ", " + tempArray[i]['completed'] + ")";

        var li = document.createElement("li");

        var title = document.createElement("div");
        title.className = "task_title";
        title.textContent = tempArray[i]['title'];

        var date = document.createElement("div");
        date.className = "task_due_date";
        date.textContent = tempArray[i]['date'];

        li.append(title);
        li.append(date);

        a.append(li);

        if (tempArray[i]['completed']) {
            completedList.append(a);
            completedCount++;
        } else {
            todoList.append(a);
            todoCount++;
        }

    }

}

function selectProject(index) {

    unselectAllProjects();

    var list = $("#project_list");
    var elem = list.children().eq(index);
    var li = elem.children().first();
    li.addClass("selected_project");

    buildProjectsActions(true);
    displayTasks(index);
}

function unselectAllProjects() {
    $('#project_list').children().each(function () {
        var li = this.children[0];
        li.className = "";
    });
}

function displayTasks(projectIndex) {

}

function addNewProject() {
    alert("add");
}

function editSelectedProject() {
    alert("edit");
}

function deleteSelectedProject() {
    var r = confirm("This will permanently delete this project, are you sure?");
    if (r == true) {
        //enviar request/* <-------------------------------------------- replace later */
        //quando retornar:
        buildProjectList();
    }
}

function addNewTask() {

}

function editSelectedTask() {

}

function deleteSelectedTask() {
    var r = confirm("This will permanently delete this task, are you sure?");
    if (r == true) {
        //enviar request
        //quando retornar: /*<-------------------------------------------- replace later */
        buildTaskList();
    }
}

function changeCompletion(complete) {

}

function moveTask(offset) {

}

function displayCompletion(complete) {
    var completeAction = document.getElementById("completion_action");
    var img = completeAction.children[0];
    img.src = complete ? "/static/images/icon_complete.png" : "/static/images/icon_undo.png";
}

function selectTask(index, completed) {
    unselectAllTasks();

    var list = $(completed ? "#completed_tasks" : "#todo_tasks");
    var elem = list.children().eq(index);
    var li = elem.children().first();
    li.addClass("selected_task");

    buildTaskActions(true);
    displayCompletion(!completed);

}

function unselectAllTasks() {
    $('#todo_tasks').children().each(function () {
        var li = this.children[0];
        li.className = "";
    });

    $('#completed_tasks').children().each(function () {
        var li = this.children[0];
        li.className = "";
    });
}

function login() {

    var username = $("#login_username").val()
    var password = $("#login_password").val();

    if (username.length > 0 && password.length > 0) {

        var req = new XMLHttpRequest();
        req.open("POST", "/api/user/login/");
        req.addEventListener("load", function() {
            buildNavigation(true);
            showHome();
         });
         req.setRequestHeader("Content-type", "application/json");
        req.send(JSON.stringify({'username' : username, 'password' : password}));
        }
    }


function register() {
    var email = $("#login_email").val()
    var username = $("#login_username").val()
    var password = $("#login_password").val();
    var passwordConfirm = $("#login_confirm_password").val();

    if (email.length >0 && username.length > 0 && password.length > 0 && passwordConfirm.length > 0 && passwordConfirm === password) {

        var req = new XMLHttpRequest();
        req.open("POST", "/api/user/register/");
        req.addEventListener("load", function() {
            json = this.responseText;
            if(!json.hasOwnProperty('status')){
                buildNavigation(true);
                showHome();
            }
         });
        req.setRequestHeader("Content-type", "application/json");
        req.send(JSON.stringify({'email' : email, 'username' : username, 'password':password}));
        }
    }


function logout() {
    //logout action /*<-------------------------------------------- replace later */
    buildNavigation(false);
    showLogin();
}

function showHome() {
    $("#container").empty();
    buildHome();
}

function showLogin() {
    $("#container").empty();
    buildLogin();
}

function showRegister() {
    $("#container").empty();
    buildRegister();
}