import Exir from "../../ui"
import TodoItem from "./TodoItem"

export default class TodoList extends Exir.View {
    constructor() {
        super();
        this.state = {
            text: "",
            items: ["ABC", "DEF"]
        }
    }

    render() {
        return <>
            <div className="row">
                <div className="container" style={{maxWidth: '250px'}}>
                    <div className="row">
                        <input className="" style="min-width: 80%"
                               value={this.state.text} type="text"
                               onChange={(_, el) => this.state.text = el.value}/>
                        <button className="btn green-o w-50" style={{maxWidth: '20%'}}
                                onClick={() => this.setState(s => s.items.push(this.state.text))}>Add
                        </button>
                    </div>
                    <>
                        <ul className="column">
                            <>
                                {this.state.items.map((it) => <TodoItem text={it}/>)}
                            </>
                        </ul>
                    </>

                </div>

            </div>
        </>
    }
}