import cx from 'classnames';
import { h, Component } from 'preact';

const ESCAPE_KEY = 27;
const ENTER_KEY = 13;

export default class TodoItem extends Component {
    handleSubmit = () => {
        let { onSave, onDestroy, todo } = this.props,
            val = this.state.editText.trim();
        if (val) {
            onSave(todo, val);
            this.setState({ editText: val });
        }
        else {
            onDestroy(todo);
        }
    };

    handleEdit = () => {
        let { onEdit, todo } = this.props;
        onEdit(todo);
        this.setState({ editText: todo.title });
    };

    toggle = e => {
        let { onToggle, todo } = this.props;
        onToggle(todo);
        e.preventDefault();
    };

    handleKeyDown = e => {
        if (e.which===ESCAPE_KEY) {
            let { todo } = this.props;
            this.setState({ editText: todo.title });
            this.props.onCancel(todo);
        }
        else if (e.which===ENTER_KEY) {
            this.handleSubmit();
        }
    };

    handleDestroy = () => {
        this.props.onDestroy(this.props.todo);
    };

    // shouldComponentUpdate({ todo, editing, editText }) {
    //  return (
    //      todo !== this.props.todo ||
    //      editing !== this.props.editing ||
    //      editText !== this.state.editText
    //  );
    // }

    componentDidUpdate() {
        let node = this.base && this.base.querySelector('.edit');
        if (node) node.focus();
    }

    render({ todo:{ title, completed }, onToggle, onDestroy, editing }, { editText }) {
        return (
            <li class={cx({ completed, editing })}>
                <div class="view">
                    <input
                        class="toggle"
                        type="checkbox"
                        checked={completed}
                        onChange={this.toggle}
                    />
                    <label onDblClick={this.handleEdit}>{title}</label>
                    <button class="destroy" onClick={this.handleDestroy} />
                </div>
                { editing && (
                    <input
                        class="edit"
                        value={editText}
                        onBlur={this.handleSubmit}
                        onInput={this.linkState('editText')}
                        onKeyDown={this.handleKeyDown}
                    />
                ) }
            </li>
        );
    }
}