var selectedProjectId;
var selectedTaskId;

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

/**
 * 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();

    var req = new XMLHttpRequest();
    req.open("GET", "/api/projects/" + selectedProjectId + "/tasks/" + selectedTaskId + "/");
    req.addEventListener("load", function () {
        var res = JSON.parse(this.responseText);
        document.getElementById("task_name").value = res['title'];
        document.getElementById("task_date").value = res['creation_date'];
    });
    req.setRequestHeader("Content-type", "application/json");
    req.send(JSON.stringify({ 'name': name, 'last_updated': getDate() }));

    document.getElementById("new_task_form").action = "javascript: editTask()";

    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();

    var req = new XMLHttpRequest();
    req.open("GET", "/api/projects/" + selectedProjectId + "/");
    req.addEventListener("load", function () {
        var res = JSON.parse(this.responseText);
        document.getElementById("project_name").value = res['name'];
    });
    req.setRequestHeader("Content-type", "application/json");
    req.send(JSON.stringify({ 'name': name, 'last_updated': getDate() }));

    document.getElementById("new_project_form").action = "javascript: editProject()";
    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();
}

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()", "/static/images/icon_add.png"));

    if (selected) {
        actionsContainer.append(buildAction("javascript: buildEditProjectForm()", "/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: buildNewTaskForm()", "/static/images/icon_add.png"));

    if (selected) {
        actionsContainer.append(buildAction("javascript: buildEditTaskForm()", "/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 req = new XMLHttpRequest();
    req.open("GET", "/api/projects/");
    req.addEventListener("load", function () {

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

        var projects = JSON.parse(this.responseText);
        for (var i in projects) {
            var a = document.createElement("a");
            a.href = "javascript: selectProject(" + projects[i].id + ", " + i + ")";
            var li = document.createElement("li");

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

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

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

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

/**
 * Builds the list of tasks displayed on the right side.
 */
function buildTaskList() {
    var req = new XMLHttpRequest();
    req.open("GET", "/api/projects/" + selectedProjectId + "/tasks/");
    req.addEventListener("load", function () {

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

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

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

        var todoCount = 0;
        var completedCount = 0;
        var tasks = JSON.parse(this.responseText);

        for (var i in tasks) {
            var a = document.createElement("a");
            a.href = "javascript: selectTask(" + tasks[i].id + ", " + (tasks[i]['completed'] ? completedCount : todoCount) + ", " + tasks[i]['completed'] + ")";

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

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

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

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

            a.append(li);

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

        }
    });
    req.send();
}

function selectProject(id, index) {
    unselectAllProjects();

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

    buildProjectsActions(true);

    selectedProjectId = id;
    buildTaskList();
}

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) {
        var req = new XMLHttpRequest();
        req.open("DELETE", "/api/projects/" + selectedProjectId + "/");
        req.addEventListener("load", function () {
            buildProjectList();
        });
        req.send();
    }
}

/**
 * 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) {
        var req = new XMLHttpRequest();
        req.open("DELETE", "/api/projects/" + selectedProjectId + "/tasks/" + selectedTaskId + "/");
        req.addEventListener("load", function () {
            buildTaskList();
        });
        req.send();
    }
}

/**
 * Changes the "completed" value of a task.
 */
function changeCompletion(complete) {
    var title = "";
    var order = 0;
    var due_date = "";
    var completed = complete ? 0 : 1;

    var req = new XMLHttpRequest();
    req.open("GET", "/api/projects/" + selectedProjectId + "/tasks/" + selectedTaskId + "/");
    req.addEventListener("load", function () {
        var res = JSON.parse(this.responseText);
        var req2 = new XMLHttpRequest();
        req2.open("PUT", "/api/projects/" + selectedProjectId + "/tasks/" + selectedTaskId + "/");
        req2.addEventListener("load", function () {
            buildTaskList();
        });
        req2.setRequestHeader("Content-type", "application/json");
        req2.send(JSON.stringify({ 'title': res['title'], 'order': res['order'], 'due_date': res['due_date'], 'completed': completed }));
    });
    req.send();
}

/**
 * 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 ? "/static/images/icon_complete.png" : "/static/images/icon_undo.png";
}

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

    selectedTaskId = id;
}

/**
 * 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 && password.length > 0) {

        var req = new XMLHttpRequest();
        req.open("POST", "/api/user/login/");
        req.addEventListener("load", function () {
            //str = JSON.parse(this.responseText);
            //if(!str.includes("\"status\": \"error\"")){
            buildNavigation(true);
            showHome();
            //}else{
            //console.log(json)
            // }
        });
        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 () {
            //var obj = JSON.parse(this.responseText);
            //console.log(obj.status)
            //if(!obj.includes("\"status\": \"error\"")){
            buildNavigation(true);
            showHome();
            //}else{
            //console.log(str)
            //}
        });
        req.setRequestHeader("Content-type", "application/json");
        req.send(JSON.stringify({ 'email': email, 'username': username, 'password': password }));
    }
}

function logout() {
    var req = new XMLHttpRequest();
    req.open("GET", "/api/user/logout/");
    req.addEventListener("load", function () {
        buildNavigation(false);
        showLogin();
    });
    req.send();
}

function getDate() {
    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth() + 1; //January is 0!
    var yyyy = today.getFullYear();

    if (dd < 10) {
        dd = '0' + dd
    }

    if (mm < 10) {
        mm = '0' + mm
    }

    return mm + '/' + dd + '/' + yyyy;
}

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

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

    var req = new XMLHttpRequest();
    req.open("POST", "/api/projects/");
    req.addEventListener("load", function () {
        closePopup();
        buildProjectList();
    });
    req.setRequestHeader("Content-type", "application/json");
    req.send(JSON.stringify({ 'name': name, 'creation_date': getDate(), 'last_updated': getDate() }));
}

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

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

    var req = new XMLHttpRequest();
    req.open("PUT", "/api/projects/" + selectedProjectId + "/");
    req.addEventListener("load", function () {
        closePopup();
        buildProjectList();
    });
    req.setRequestHeader("Content-type", "application/json");
    req.send(JSON.stringify({ 'name': name, 'last_updated': getDate() }));

}

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;
    }

    var req = new XMLHttpRequest();
    req.open("POST", "/api/projects/" + selectedProjectId + "/tasks/");
    req.addEventListener("load", function () {
        closePopup();
        buildTaskList();
    });
    req.setRequestHeader("Content-type", "application/json");
    req.send(JSON.stringify({
        'title': name, 'creation_date': getDate(), 'due_date': dueDate,
        'completed': 0
    }));
}

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"));
}