<todo>
<h3>{ props.title }</h3>

<ul>
	<li each={ todo in state.todos } key = {todo.id}>
		<label class={ todo.done ? 'completed' : '' }>
		<input
	    type="checkbox"
	    checked = { todo.done }
	    onclick = { () => toggle(todo) } />
	    { todo.title } 
		</label>
		<span class="destroy" onclick={() => remove(todo)}></span>
	</li>
</ul>

<form onsubmit={ add }>
	<input oninput={ edit } />
	<button disabled={ !state.text }>
		Add #{ state.todos.length + 1 }
	</button>
	<button onclick={ clear }>Clear done</button>
	<ul class="filters">
		<li><span>0 todos left</span> </li>
		<li>  <a href="#"> All</a></li>
		<li>  <a href="#">Active</a></li>
		<li>  <a href="#">Done</a></li>
	</ul>
</form>

<script>
	export default {
		onBeforeMount(props, state) {
			// initial state
			this.state = {
				todos: props.todos,
				text: '',
			}
		},

		edit(e) {
			// update only the text state
			this.update({
				text: e.target.value
			})
		},
		clear(e) {
			// TODO

		},
		add(e) {
			// TODO
		},
		toggle(todo) {
			todo.done = !todo.done
			this.update()
		},
		remove(todo){
			// TODO
		}
	}
</script>
</todo>
