//todo list
//retrieve todo's from localStorage.Retun an empty array if no list is found
//localStorage are key/valye pairs and always stored as strings. Always parse them
//to a valid JS object before using them

var elDays = document.getElementById('days');
var elList = document.querySelector('ul');
var elH1 = document.querySelector('h1');
var select = document.querySelector('select');


var d = new Date();
// var today = date.getDate() + "_" + (date.getMonth()+1) + "_" + date.getFullYear();

//changes background from day to night from 6:00pm to 6 a.m.
function updateBackground(){
    var hour = d.getHours();

    if(hour > 6 && hour < 18) 
        document.body.style.backgroundImage = "url('images/day.jpg')";      
    else
        document.body.style.backgroundImage = "url('images/darkSky.jpg')";
}
updateBackground();

//takes month for creating calendar
var monthArray = new Array(12);
monthArray[0] = "January";
monthArray[1] = "Febuary";
monthArray[2] = "March";
monthArray[3] = "April";
monthArray[4] = "May";
monthArray[5] = "June";
monthArray[6] = "July";
monthArray[7] = "August";
monthArray[8] = "September";
monthArray[9] = "October";
monthArray[10] = "November";
monthArray[11] = "December";

var utcMonth = monthArray[d.getUTCMonth()];


//updates the date every second
function updateClock(){
    var date = new Date();
    var n = date.toDateString();
    var time = date.toLocaleTimeString();
    var elTime = document.getElementById('time');
    timeContent = elTime.innerHTML;
    elTime.innerHTML = n + ' ' + time;
}

 setInterval(updateClock, 1000); 


 //creates a calendar depending upon which month it is
function createCalendar(days, choice){
    elList.innerHTML = '';
    elH1.textContent = utcMonth;
    var days = 31;
    if(choice === 'February'){
        days = 28;
    } else if(choice === 'April' || choice === 'June' || choice === 'September' || choice === 'November'){
        days = 30;
    } 
    for(var i = 1; i <= days; i++) {
    var elListItem = document.createElement('li');
    elListItem.textContent = i;
    elList.appendChild(elListItem);
    }
}

createCalendar();

var date = new Date(); // current date
var dateClicked = date.getDate() + "_" + (date.getMonth()+1) + "_" + date.getFullYear();

var month = (date.getMonth())+1; //current month
var year = date.getFullYear(); //current year

//get todo's from localStorage
function get_todos(){
    var todos = [];
    var todos_str = localStorage.getItem(dateClicked); 
    if(todos_str !=null){
        todos = JSON.parse(todos_str);
    }
    return todos;
}
// Adding a new TODO entry
function add(){
    var todos = get_todos();
    var task = $('#task').val();     
    var taskObj = {    
        task:task,
        isDone:false,
    };
    
    todos.push(taskObj);
    
    localStorage.setItem(dateClicked,JSON.stringify(todos));
    //update list of the TODO's displayed on webpage
    show();
    $("input").val("");
    //avoid any further actions generated by 'click' event
    return false;
}

//remove the to-do list items from localStorage
function removeStorage(){
    var todos = get_todos();    
    var id = event.currentTarget.getAttribute('id');
        todos.splice(id,1);
    localStorage.setItem(dateClicked,JSON.stringify(todos));
    show();
    return false;
}

//update localStorage for completed tasks
function updateLocalStorage(val){
    
     var todos = get_todos();
        for(var i=0;i<todos.length;i++){
            if(todos[i].task === val){
                    todos[i].isDone = true;
            }
        }
    localStorage.setItem(dateClicked,JSON.stringify(todos));
    
}

//display the current todo list on webpage
function show(){

    var todos = get_todos();
    var html="<ul>";
    for(var i=0; i<todos.length; i++) {
        var addClassStr = todos[i].isDone ? 'class=taskCompleted' : '';
        html+= '<li ' + addClassStr + ' value='+ todos[i].task + '>' + todos[i].task + '<button class="remove" id="' + i  + '">x</button></li>';
    }
    html+="</ul>";
    $("#todos").html(html);
    $(".remove").click(function(event){
        event.currentTarget.parentElement.remove();
        removeStorage();        
    }); 
    
    $("#todos").on('click','li',function(){
        $(this).addClass("taskCompleted");
        updateLocalStorage($(this).attr("value"));

    });
}

$("input").keydown(function(e){
    if( $(this).val()!=="" && e.keyCode===13){
        event.preventDefault();
        add();    
    }
});


$(".todo-bar").hide();
$(".cross").hide();
    $(".hamburger").click(()=>{
    $(".todo-bar").slideToggle( "slow", ()=> {
        $( ".hamburger" ).hide();
        $( ".cross" ).show();
        });
    });
   $(".cross").click(()=>{
       $(".todo-bar").slideToggle("slow",()=>{
           $(".cross").hide();
           $(".hamburger").show();
        });
   });

$("#days").click(function(event){
    // $(".todo-bar").slideToggle( "slow", function() {
    //     $( ".hamburger" ).hide();
    //     $( ".cross" ).show();
    //     });
    $(".todo-bar").show("slow",function(){
        $(".hamburger").hide();
        $(".cross").show();
    });

    dateClicked = $(event.target).text()+ "_" + month + "_" + year; 
    show();    
    //console.log(id);       
});

$(document).ready(function(){
    document.getElementById("todo-bar").onload = function(){
        show();
    };   
        
});
show();