jQuery(function($){
    var pokemones={};
    
    var proyectos = [];

    $("#resultado").dialog({
        autoOpen: false,
        modal: true,
        show: {
            effect: "explode",
            duration: 1000
        },
          hide: {
            effect: "explode",
            duration: 1000
        },
        buttons:{
            "Aceptar":function(){ 
                $(this).dialog("close");
            }
        }
    });
    //Carga la lista
    $.ajax({
        url: 'https://inthe.am/api/v2/tasks/',
        type: "GET",
        headers: {
            "Authorization": "Token a13f20e0ddffd021e7096ab62f1ee03557774499"
        },
        dataType: "json",
        success: function(data, textStatus, jqXHR) {
            generarTabla(data);
        }
    });

    function generarTabla(data) {
        for (var i = 0; i < data.length; i++) {
            generarFila(data[i]);
        }
    }

    function mostrarDetalle(id){
        console.log("mostrarDetalle");
        console.log(this);
        
    }

    function generarFila(rowData) {
        var row = $("<tr />");
        row.attr("id",rowData.id);
        row.attr("class","fila");
        var cantidad = $(".fila").toArray().length;
        if((cantidad+1)%2==0){
            row.attr("style","background-color: green");
        }else{
            row.attr("style","background-color: red");
        }
        $("#listaTareas").append(row); //this will append tr element to table... keep its reference for a while since we will add cels into it
        row.append($("<td>" + rowData.id + "</td>"));
        row.append($("<td>" + rowData.entry + "</td>"));
        row.append($("<td>" + rowData.description + "</td>"));
        row.append($("<td>" + rowData.priority + "</td>"));
        row.append($("<td>" + rowData.status + "</td>"));
        var btnEliminar = $('<input/>');
        btnEliminar.attr("type","button");
        btnEliminar.attr("value","Eliminar")
        btnEliminar.attr("id","btnEliminar");
        btnEliminar.attr("name",rowData.id);
        btnEliminar.attr("class","btn btn-dark");
        var btnDetalle = $('<input/>');
        btnDetalle.attr("type","button");
        btnDetalle.attr("value","Detalle");
        btnDetalle.attr("id","btnDetalle");
        btnDetalle.attr("name",rowData.id);
        btnDetalle.attr("class","btn btn-dark");
        row.append($("<td>").append(btnEliminar));
        row.append($("<td>").append(btnDetalle));
        //Cargamos los nombres de los proyectos en la lista de proyectos
        //Buscamo si ya existe en la lista
        var encontrado = false;
        for(var i=0;i<proyectos.length;i++){
            if(proyectos[i]==rowData.project){
                encontrado = true;
            }
        }
        if(!encontrado){
            proyectos.push(rowData.project);
            $("#selectorProyecto option").remove();
            for(var i=0;i<proyectos.length;i++){
                var opcion = $("<option/>")
                opcion.attr("value",proyectos[i]);
                opcion.append(proyectos[i]);
                $("#selectorProyecto").append(opcion);
            }
        } 
    }

    $("#listaTareas").on("click","#btnEliminar",function(){
        var clave = $(this).attr("name");
        console.log(clave);
        $.ajax({
            url: 'https://inthe.am/api/v2/tasks/'+clave+'/delete/',
            type: "POST",
            headers: {
                "Authorization": "Token a13f20e0ddffd021e7096ab62f1ee03557774499"
            },
            dataType: "json",
            // success: function(data, textStatus, jqXHR) {
            //     alert("Eliminado: "+clave);
            //     generarTabla(data);
            // },
            complete: function(data, textStatus, jqXHR) {
                $("#"+clave).fadeOut("slow",function (params) {
                    $("#"+clave).remove();
                });
            },
        });
    });
    
    $("#listaTareas").on("click","#btnDetalle",function(){
        var clave = $(this).attr("name");
        $("#resultado p").remove();
        $.ajax({
            url: 'https://inthe.am/api/v2/tasks/'+clave+'/',
            type: "GET",
            headers: {
                "Authorization": "Token a13f20e0ddffd021e7096ab62f1ee03557774499"
            },
            dataType: "json",
            success: function(data, textStatus, jqXHR) {
                $("#resultado").append($("<p/>").append("ID: "+data.id));
                $("#resultado").append($("<p/>").append("ID Usuario: "+data.uuid));
                $("#resultado").append($("<p/>").append("ID Corto: "+data.short_id));
                $("#resultado").append($("<p/>").append("Estado: "+data.status));
                $("#resultado").append($("<p/>").append("Urgencia: "+data.urgency));
                $("#resultado").append($("<p/>").append("Descripcion: "+data.description));
                $("#resultado").append($("<p/>").append("Proyecto: "+data.project));
                $("#resultado").append($("<p/>").append("Fecha y hora entrada: "+data.entry));
                $("#resultado").append($("<p/>").append("Fecha y hora modificacion: "+data.modified));
            }
        });
        $("#resultado").dialog("open");
    });

    $("#formularioEntrada").on("click","#btnIngresar",function () {
        var proyecto = $("#entradaProyecto").val();
        var descripcion = $("#entradaDescripcion").val();
        console.log(proyecto);
        console.log(descripcion);
        $.ajax({
            url: 'https://inthe.am/api/v2/tasks/',
            type: "POST",
            headers: {
                "Authorization": "Token a13f20e0ddffd021e7096ab62f1ee03557774499"
            },
            dataType: "json",
            data:{
                "proyect": proyecto,
                "description": descripcion
            },
            success: function(data, textStatus, jqXHR) {
                generarFila(data);
            }
        });
    });

    $("#formularioModificar").on("click","#btnModificar",function(){
        var idproyecto = $("#entradaIDModificar").val();
        var nuevoNombre = $("#entradaNuevoNombre").val();
        var nuevaDescripcion = $("#entradaNuevaDescripcion").val();
        var objetoFila = new Object();
        //Obtenemos los datos de la fila
        $.ajax({
            url: 'https://inthe.am/api/v2/tasks/'+idproyecto+'/',
            type: "GET",
            headers: {
                "Authorization": "Token a13f20e0ddffd021e7096ab62f1ee03557774499"
            },
            dataType: "json",
            success: function(data, textStatus, jqXHR) {
                objetoFila = data;
            }
        });

        //Modificamos la fila
        $.ajax({
            url: 'https://inthe.am/api/v2/tasks/'+idproyecto+'/',
            type: "PUT",
            headers: {
                "Authorization": "Token a13f20e0ddffd021e7096ab62f1ee03557774499"
            },
            dataType: "json",
            data:{
                "id": objetoFila.id,
                "uuid": objetoFila.uuid,
                "short_id": objetoFila.short_id,
                "status": objetoFila.status,
                "urgency": objetoFila.urgency,
                "description": nuevaDescripcion,
                "priority": objetoFila.priority,
                "project": nuevoNombre,
                "due": objetoFila.due,
                "entry": objetoFila.entry,
                "modified": objetoFila.modified,
                "blocks": objetoFila.blocks,
                "udas": {
                    "intheamtrelloboardid": "5b7d9f4aacb9b3272ed566b2",
                    "intheamtrellolistid": "5b7d9f4aacb9b3272ed566b3",
                    "intheamtrellolistname": "To Do",
                    "intheamtrelloid": "5c1a70c839d3057f6a2cb138",
                    "intheamtrellourl": "https://trello.com/c/lSWG82Cj/69-dise%C3%B1ar-cosas"
                }
            },
            success: function(data, textStatus, jqXHR) {
                
            },  
        });
        //Modificamos la fila
        $("#"+idproyecto+" td:nth-child(3)").text(nuevaDescripcion); 
    });

    $("#filtrarDescripcion").on("click","#btnFiltrar",function() {
        var filtro = $("#entradaFiltro").val();
        //Borramos todo el contenido de la tabla
        $("#listaTareas tr").remove();
        //Obtenemos todas las tablas
        var datos;
        $.ajax({
            url: 'https://inthe.am/api/v2/tasks/',
            type: "GET",
            headers: {
                "Authorization": "Token a13f20e0ddffd021e7096ab62f1ee03557774499"
            },
            dataType: "json",
            success: function(data, textStatus, jqXHR) {
                for (var i = 0; i < data.length; i++) {
                    if(data[i].description == filtro){
                        generarFila(data[i]);
                    }
                }
            }
        });
       
        
    });

    $("#filtrarDescripcion").on("click","#btnRestaurar",function(){
        //Borramos todo el contenido de la tabla
        $("#listaTareas tr").remove();
        //Cargamos todas las tablas
        $.ajax({
            url: 'https://inthe.am/api/v2/tasks/',
            type: "GET",
            headers: {
                "Authorization": "Token a13f20e0ddffd021e7096ab62f1ee03557774499"
            },
            dataType: "json",
            success: function(data, textStatus, jqXHR) {
                generarTabla(data);
            }
        });
    });

    $("#filtrarProyecto").on("click","#btnFiltrarProyecto",function(){
        //Cargamos la lista
        var lista = [];
        $.ajax({
            url: 'https://inthe.am/api/v2/tasks/',
            type: "GET",
            headers: {
                "Authorization": "Token a13f20e0ddffd021e7096ab62f1ee03557774499"
            },
            dataType: "json",
            success: function(data, textStatus, jqXHR) {
                //Buscamos cual de ellas son el proyecto deseado 
                var proyecto = $("#selectorProyecto").val();
                //Obtenemos la lista que cumple la condicion
                var lista = [];
                for(var i=0;i<data.length;i++){
                    if(data[i].project==proyecto){
                        lista.push(data[i])
                    }
                }
                //Cargamos el contenido en la tabla
                $("#listaTareas tr").remove();
                generarTabla(lista);
            }
        });
        
    });

    $("#filtrarProyecto").on("click","#btnTodoProyecto",function(){
         //Borramos todo el contenido de la tabla
         $("#listaTareas tr").remove();
         //Cargamos todas las tablas
         $.ajax({
             url: 'https://inthe.am/api/v2/tasks/',
             type: "GET",
             headers: {
                 "Authorization": "Token a13f20e0ddffd021e7096ab62f1ee03557774499"
             },
             dataType: "json",
             success: function(data, textStatus, jqXHR) {
                 generarTabla(data);
             }
         });
    });
});