import {defineElement, render, CustomElement, Host} from "../../../packages/csx-custom-elements";

import style from './my-todo.scss';
import {TodoInput} from './todo-input';
import {TodoItem} from './todo-item';

@defineElement('my-todo')
export class MyTodo extends CustomElement{
    uid = 1;
    todos = [
        {id: this.uid++, text: "my initial todo", checked: false },
        {id: this.uid++, text: "Learn about Web Components", checked: false },
    ];
    
    render(){
        return (
            <Host>
                <style>{ style }</style>
                <h1>CSX Todo</h1>
                <section>
                    <todo-input onSubmit={this.handleSubmit}/>
                    <ul id="list-container"
                        onCheck={this.handleCheck}
                        onRemove={this.handleRemove}
                    >
                        {this.todos.map(item =>
                            <todo-item
                                model={ item.id }
                                checked={( item.checked )}
                            >{ item.text }</todo-item>
                        )}
                    </ul>
                </section>
            </Host>
        );
    }
    
    handleSubmit = ({ detail: text }) => {
        this.todos = [...this.todos, { id: this.uid++, text, checked: false }];
    };
    handleCheck = ({detail: checked}, id) => {
        let indexOf = this.todos.findIndex(t=>t.id===id);
        let updated = {...this.todos[indexOf], checked};
        this.todos = [...this.todos.slice(0,indexOf), updated, ...this.todos.slice(indexOf+1)];
    };
    handleRemove = (e,id)=>{
        let indexOf = this.todos.findIndex(t=>t.id===id);
        this.todos = [...this.todos.slice(0,indexOf), ...this.todos.slice(indexOf+1)];
    }
}