import React from 'react';
import TodoCreator from './TodoCreator';
import TodoItem from './TodoItem';

// interface TodoInterface {
//     todos?: Array<object>
// }

class Todo extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            todos: props.todos || [],
        };
    }

    // 新增待办事项
    public addTodo = (newTodo: string) => {
        const { todos } = this.state;
        const tem = {
            done: false,
            value: newTodo,
        };
        todos.push(tem);
        this.setState({
            todos,
        });
    }

    // 删除待办事项
    public deleteTodo = (index: number, checked: boolean) => {
        const { todos } = this.state;
        // console.log(todos[index]['done']);
        todos[index].done = checked;
        // todos.splice(index, 1);
        this.setState({
            todos,
        });
    }

    public render() {
        const { todos } = this.state;
        return (
            <div>
                <TodoCreator addTodo={this.addTodo} />
                {todos.map((todo: object, index: number) => {
                    return (
                        <TodoItem key={index} index={index} todo={todo} deleteTodo={this.deleteTodo} />
                    );
                })}
            </div>
        );
    }
}

export default Todo;