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

/**
 * Builds a form to edit the selected task.
 * This method will first create a new empty task form and then populate
 * the inputs with the task's information.
 */
function buildEditTaskForm() {
    buildNewTaskForm();

    document.getElementById("new_task_form").action = "javascript: editTask()";
    document.getElementById("task_name").value = "TEST"; /* <--------------------------------------------------------------*/
    document.getElementById("task_date").value = "TEST"; /* <--------------------------------------------------------------*/
    document.getElementById("new_task_button").value = "EDIT";
}

/**
 * Builds a form to add a new task.
 */
function buildNewTaskForm() {
    $("#page_overlay").empty();
    var container = document.body;

    var overlay = document.createElement("div");
    overlay.id = "page_overlay";

    var pform = document.createElement("div");
    pform.id = "task_form";

    var form = document.createElement("form");
    form.id = "new_task_form"
    form.action = "javascript: addTask()";

    var close = document.createElement("a");
    close.textContent = "x"
    close.href = "javascript: closePopup();";

    var nameInput = document.createElement("input");
    nameInput.type = "text";
    nameInput.id = "task_name";
    nameInput.placeholder = "Task name";

    var p = document.createElement("p");
    p.textContent = "Due date:";

    var dateInput = document.createElement("input");
    dateInput.type = "date";
    dateInput.id = "task_date";

    var submitBtn = document.createElement("input");
    submitBtn.id = "new_project_button";
    submitBtn.type = "submit";
    submitBtn.value = "CREATE";

    form.append(close);
    form.append(nameInput);
    form.append(p);
    form.append(dateInput);
    form.append(submitBtn);

    pform.append(form);

    overlay.append(pform);
    container.append(overlay);
}

/**
 * Builds a form to add a new project.
 */
function buildNewProjectForm() {
    $("#page_overlay").empty();
    var container = document.body;

    var overlay = document.createElement("div");
    overlay.id = "page_overlay";

    var pform = document.createElement("div");
    pform.id = "project_form";

    var form = document.createElement("form");
    form.id = "new_project_form"
    form.action = "javascript: addProject()";

    var close = document.createElement("a");
    close.textContent = "x"
    close.href = "javascript: closePopup();";

    var nameInput = document.createElement("input");
    nameInput.type = "text";
    nameInput.id = "project_name";
    nameInput.placeholder = "Project name";

    var submitBtn = document.createElement("input");
    submitBtn.id = "new_project_button";
    submitBtn.type = "submit";
    submitBtn.value = "CREATE";

    form.append(close);
    form.append(nameInput);
    form.append(submitBtn);

    pform.append(form);

    overlay.append(pform);
    container.append(overlay);
}

/**
 * Builds a form to edit the selected project.
 * This method will first create a new empty project form and then populate
 * the inputs with the project's information.
 */
function buildEditProjectForm() {
    buildNewProjectForm();

    document.getElementById("new_project_form").action = "javascript: editProject()";
    document.getElementById("project_name").value = "TEST"; /* <--------------------------------------------------------------*/
    document.getElementById("new_project_button").value = "EDIT";
}

/**
 * Builds the login page
 */
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);
}

/**
 * Builds the register page
 */
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 nameInput = document.createElement("input");
    nameInput.type = "text";
    nameInput.id = "login_name";
    nameInput.placeholder = "Name";

    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(nameInput);
    form.append(emailInput);
    form.append(passwordInput);
    form.append(passwordConfirmInput);
    form.append(submitBtn);

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

    container.append(formContainer);
}

/**
 * Builds the home page
 */
function buildHome() {
    buildPageStructure();

    buildProjectsActions(false);
    buildTaskActions(false);

    buildProjectList();
    buildTaskList();
}

/**
 * Builds the home page's structure, in which the other build methods will build on top of.
 */
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);
}

/**
 * Builds the navigation bar, either for logged users or visitors.
 */
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()"));
    }

}

/**
 * Builds a navigation button with a given name and url action.
 */
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: buildNewProjectForm()", "images/icon_add.png"));

    if (selected) {
        actionsContainer.append(buildAction("javascript: buildEditProjectForm()", "images/icon_edit.png"));
        actionsContainer.append(buildAction("javascript: deleteSelectedProject()", "images/icon_delete.png"));
    } else {
        actionsContainer.append(buildAction("", "images/icon_edit_faded.png"));
        actionsContainer.append(buildAction("", "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()", "images/icon_complete.png");
        completion.id = "completion_action";

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

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

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

    if (selected) {
        actionsContainer.append(buildAction("javascript: buildEditTaskForm()", "images/icon_edit.png"));
        actionsContainer.append(buildAction("javascript: deleteSelectedTask()", "images/icon_delete.png"));
    } else {
        actionsContainer.append(buildAction("", "images/icon_edit_faded.png"));
        actionsContainer.append(buildAction("", "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++;
        }
    }
}

/**
 * Selects a specific project on the list by it's index.
 */
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);

    /* <------------------ SET SELECTED TASK HERE */
    buildTaskList();
}

/**
 * Unselects all the projects on the project list.
 */
function unselectAllProjects() {
    $('#project_list').children().each(function () {
        var li = this.children[0];
        li.className = "";
    });
}

/**
 * Creates a confirm dialogue, if confirmed, it will send a delete project request to the server.
 */
function deleteSelectedProject() {
    var r = confirm("This will permanently delete this project, are you sure?");
    if (r == true) {
        //enviar request/* <-------------------------------------------- replace later */
        //quando retornar:
        buildProjectList();
    }
}

/**
 * Creates a confirm dialogue, if confirmed, it will send a delete task request to the server.
 */
function deleteSelectedTask() {
    var r = confirm("This will permanently delete this task, are you sure?");
    if (r == true) {
        //enviar request
        //quando retornar: /*<-------------------------------------------- replace later */
        buildTaskList();
    }
}

/**
 * Changes the "completed" value of a task.
 */
function changeCompletion(complete) {
    /* <--------------------------------------------- SET TASK COMPLETION TO complete */
    buildTaskList();
}

/**
 * Moves a task up or down in the list (1 == up, -1 == down).
 */
function moveTask(offset) {
    /* <--------------------------------------------- MOVE TASK (1 == up, -1 == down) */
    buildTaskList();
}

/**
 * Changes the complete/undo icon depending on the task's status.
 */
function displayCompletion(complete) {
    var completeAction = document.getElementById("completion_action");
    var img = completeAction.children[0];
    img.src = complete ? "images/icon_complete.png" : "images/icon_undo.png";
}

/**
 * Selects a specific task on the list, displaying it's tasks.
 */
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);
}


/**
 * Unselects all the tasks on the list.
 */
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) {
        alert("Invalid username");
        return;
    }

    if (password.length == 0) {
        alert("Invalid password");
        return;
    }

    if (true) { /* <-------------------------------------------- replace later */
        //login action here
        buildNavigation(true);
        showHome();
    }
}

function register() {

    var username = $("#login_username").val()
    var name = $("#login_name").val()
    var password = $("#login_password").val();
    var passwordConfirm = $("#login_confirm_password").val();

    if (username.length == 0) {
        alert("Invalid username");
        return;
    }

    if (name.length == 0) {
        alert("Invalid name");
        return;
    }

    if (password.length == 0) {
        alert("Invalid password");
        return;
    }

    if (passwordConfirm !== password) {
        alert("Passwords don't match");
        return;
    }

    if (true) { /* se register bem sucedido <-------------------------------------------- replace later */
        //register action here
        //login action here
        buildNavigation(true);
        showHome();
    }
}



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

function addProject() {

    var name = $("#project_name").val();

    if (name.length === 0) {
        alert("Invalid name");
        return;
    }

    //add action /*<-------------------------------------------- replace later */
    if (true) { // se for bem sucedido (troca depois)
        closePopup();
        buildProjectList();
    }
}

function editProject() {
    var name = $("#project_name").val();

    if (name.length === 0) {
        alert("Invalid name");
        return;
    }

    //edit action /*<-------------------------------------------- replace later */
    if (true) { // se for bem sucedido (troca depois)
        closePopup();
        buildProjectList();
    }
}

function addTask() {

    var name = $("#task_name").val();
    var dueDate = $("#task_date").val();

    if (name.length === 0) {
        alert("Invalid name");
        return;
    }

    if (dueDate.length === 0) {
        alert("Invalid date");
        return;
    }

    //add action /*<-------------------------------------------- replace later */
    if (true) { // se for bem sucedido (troca depois)
        closePopup();
        buildTaskList();
    }

}

function editTask() {

    var name = $("#task_name").val();
    var dueDate = $("#task_date").val();

    if (name.length === 0) {
        alert("Invalid name");
        return;
    }

    if (dueDate.length === 0) {
        alert("Invalid date");
        return;
    }

    //edit action /*<-------------------------------------------- replace later */
    if (true) { // se for bem sucedido (troca depois)
        closePopup();
        buildTaskList();
    }

}

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

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

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

function closePopup() {
    document.body.removeChild(document.getElementById("page_overlay"));
}