import {defineElement, render, CustomElement, Host, ShadowDOM, State} from "../../../packages/csx-custom-elements";
import style from './todo-item.scss';

@defineElement('todo-item')
export class TodoItem extends CustomElement{
    @State() checked = false;// TODO annotate as prop instead of state (attribute)
    @State() model; // TODO annotate as prop instead of state
    @State() text;
    
    render(){
        return (
            <Host>
                <ShadowDOM>
                    <style>{ style }</style>
                    <li class={( this.checked ? 'completed' : '' )}>
                        <input
                            type="checkbox" checked={ this.checked }
                            onChange={this.handleChange}
                        />
                        <label>
                            <slot />
                        </label>
                        <button onClick={this.handleClick}>x</button>
                    </li>
                </ShadowDOM>
            </Host>
        );
    }
    
    handleChange = ()=>{
        this.dispatchEvent(new CustomEvent('check', {
            detail: {checked: (this.checked=!this.checked), id: this.model},
            bubbles: true
        }));
    };
    handleClick = ()=>{
        this.dispatchEvent(new CustomEvent('remove', {
            detail: {id: this.model},
            bubbles: true
        }));
    };
}