import {defineElement, render, CustomElement, Host, state} from "../../../packages/csx";

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;
    @state() 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>
                    <TodoInput onSubmit={this.handleSubmit}/>
                    <ul id="list-container"
                        onCheck={this.handleCheck}
                        onRemove={this.handleRemove}
                    >
                        {this.todos.map(item =>
                            <TodoItem
                                key={item.id}
                                model={ item.id }
                                checked={ item.checked }
                            >
                                { item.text }
                            </TodoItem>
                        )}
                    </ul>
                </section>
            </Host>
        );
    }
    
    handleSubmit = ({ detail: text }) => {
        if(text) {
            console.log("Submit rcvd: " + text);
            this.todos = [...this.todos, { id: this.uid++, text, checked: false }];
        }
    };
    handleCheck = ({detail: {checked,id}}) => {
        let indexOf = this.todos.findIndex(t=>t.id===id);
        if(indexOf>=0) {
            let updated = { ...this.todos[ indexOf ], checked };
            this.todos = [...this.todos.slice(0, indexOf), updated, ...this.todos.slice(indexOf + 1)];
        }
    };
    handleRemove = ({detail: {id}})=>{
        let indexOf = this.todos.findIndex(t=>t.id===id);
        this.todos = [...this.todos.slice(0,indexOf), ...this.todos.slice(indexOf+1)];
    }
}