import Inferno from 'inferno';
import Component from 'inferno-component';
import { ENTER, filters, read } from './share';
import { Head, Foot } from './base';
import Model from './model';
import Item from './item';

const { render } = Inferno;
const model = new Model();

class App extends Component {
    state = {
        route: read(),
        todos: model.get()
    };

    update = arr => this.setState({todos: arr});

    componentWillMount = () => {
        window.onhashchange = () => this.setState({route: read()});
    };

    add = e => {
        if (e.which !== ENTER) return;

        const val = e.target.value.trim();
        if (!val) return;

        e.target.value = '';
        this.update(
            model.add(val)
        );
    };

    edit = (todo, val) => {
        val = val.trim();
        if (val.length) {
            this.update(
                model.put(todo, {title: val, editing: 0})
            );
        } else {
            this.remove(todo);
        }
    };

    focus = todo => this.update(
        model.put(todo, {editing: 1})
    );

    blur = todo => this.update(
        model.put(todo, {editing: 0})
    );

    remove = todo => this.update(
        model.del(todo)
    );

    toggleOne = todo => this.update(
        model.toggle(todo)
    );

    toggleAll = ev => this.update(
        model.toggleAll(ev.target.checked)
    );

    clearCompleted = () => this.update(
        model.clearCompleted()
    );

    render(_, {todos, route}) {
        const num = todos.length;
        const shown = todos.filter(filters[route]);
        const numDone = todos.filter(filters.completed).length;
        const numAct = num - numDone;

        return (
            <div>
                <Head onEnter={ this.add } />

                { num ? (
                    <section className="main">
                        <input className="toggle-all" type="checkbox"
                            onClick={ this.toggleAll } checked={ numAct === 0 }
                        />

                        <ul className="todo-list">
                            {
                                shown.map(t =>
                                    <Item data={t}
                                        onBlur={ () => this.blur(t) }
                                        onFocus={ () => this.focus(t) }
                                        doDelete={ () => this.remove(t) }
                                        doSave={ val => this.edit(t, val) }
                                        doToggle={ () => this.toggleOne(t) }
                                    />
                                )
                            }
                        </ul>
                    </section>
                ) : null }

                { (numAct || numDone) ? (
                    <Foot onClear={ this.clearCompleted }
                        left={numAct} done={numDone} route={route}
                    />
                ) : null }
            </div>
        )
    }
}

render(<App />, document.getElementById('app'));