<todo>
<h3>{ props.title }</h3>
<ul>
	<li each={ item in state.items }>
		<label class={ item.done ? 'completed' : null }>
			<input
	   type="checkbox"
	checked={ item.done }
	onclick={ () => toggle(item) } />
	{ item.title } 
		</label>
	</li>
</ul>
<form onsubmit={ add }>
	<input oninput={ edit } />
	<button disabled={ !state.text }>
		Addddd #{ state.items.length + 1 }
	</button>
	<button disabled={ this.state.items.some(item => !item.done) } onclick={ clear }>Clear done</button>
	<ul class="filters">
		<li>  <a href="#">All</a></li>
		<li>  <a href="#">Active</a></li>
		<li>  <a href="#">Done</a></li>
	</ul>
</form>
	<script>
		export default function todos(){
			return {
				onBeforeMount(props, state) {
					// initial state
					this.state = {
						items: props.items,
						text: ''
					}
				},
				edit(e) {
					// update only the text state
					this.update({
						text: e.target.value	
					})
				},
				clear(e) {
					this.update({
						items: this.state.items.filter(item => !item.done)
					})
					this.update()
				},
				add(e) {
                    e.preventDefault()

                    if (this.state.text) {
                    this.update({
                        items: [
                        ...this.state.items,
                        // add a new item
                        {title: this.state.text}
                        ],
                        text: ''
                    })
                    }
                },
				toggle(item) {
					item.done = !item.done
					// trigger a component update
					this.update()
				}
			}
		}
	</script>
</todo>