import {defineElement, render, CustomElement, Host, state} from "../../../packages/csx";
import style from './todo-input.scss';

@defineElement('todo-input')
export class TodoInput extends CustomElement{
    @state() value = "";
    
    render(){
        return (
            <Host>
                <style>{ style }</style>
                <form onSubmit={ this.handleSubmit }>
                    <input
                        value={this.value}
                        type="text"
                        placeholder="What needs to be done?"
                        onInput={this.handleInput}
                    />
                </form>
            </Host>
        )
    }
    
    handleSubmit = (e)=>{
        e.preventDefault();
        if (!this.value) return;
        this.dispatchEvent(new CustomEvent('submit', {
            detail: this.value
        }));
        this.value = "";
    };
    handleInput = ({target: {value}})=>{
        this.value = value;
    };
}