const todos = [{
    text: 'Wash the car',
    completed: false
},{
    text: 'Make dinner',
    completed: false
},{
    text: 'Walk the dog',
    completed: true
},{
    text: 're-pot plants',
    completed: true
},{
    text: 'Learn to code',
    completed: false
}]

const filters = {
    searchText: ''
}

const hideCompleted = false

const renderTodos = function(todos, filters){
    let fileteredTodos = todos.filter(function(todo){
        return todo.text.toLowerCase().includes(filters.searchText.toLowerCase())
    })

fileteredTodos = fileteredTodos.filter(function(todo){
    if(filters.hideCompleted){
        return !todo.completed
    }else{
        return true
    }
})

    const todosLeft = fileteredTodos.filter(function(todo){
        return !todo.completed
    })

    document.querySelector('#todos').innerHTML = ''

    const summery = document.createElement('p')
    summery.textContent = `You have ${todosLeft.length} todos`
    document.querySelector('#todos').appendChild(summery)

    fileteredTodos.forEach(function(todo){
        const todoList = document.createElement('p')
        todoList.textContent = todo.text
        document.querySelector('#todos').appendChild(todoList)
    })
}

renderTodos(todos, filters)

document.querySelector('#search-text').addEventListener('input', function(e){
    filters.searchText = e.target.value
    renderTodos(todos, filters)
})

document.querySelector('#new-todo').addEventListener('submit', function(e){
    e.preventDefault()
    todos.push({
        text: e.target.elements.text.value,
        completed: false
    })
    renderTodos(todos, filters)
    e.target.elements.text.value = ''
})

document.querySelector('#hide-completed').addEventListener('change', function(e){
       filters.hideCompleted = e.target.checked
       renderTodos(todos, filters)
})

//Create checkbox and setup event listening - Hide completed
//Create new hideCompleted filter (default false)
//Update hideCompleted and render list on checkbox change
//Setup rederTodos to remove completed items