import React from 'react';
import { observable, action, makeObservable } from 'mobx';
import { PropTypes } from 'mobx-react';
import { Layout } from './shared/Layout';
import 'bootstrap/dist/css/bootstrap.min.css';

interface ToDoListItem {
    todo: string,
    checked: boolean,
}

interface ToDoState {
    inputText: string,
    toDoList: ToDoListItem[],
}

const TodoItem: React.FunctionComponent<{
    item: ToDoListItem,
    onRemoveButtonClick: (id) => void
}> = ({ item, onRemoveButtonClick }) => {
    let onClick = () => {
        onRemoveButtonClick(item);
    }
    return (
        <div>
            <button onClick={onClick}>Remove</button>
            {item.todo}
        </div>
    );
}
const TodoList: React.FunctionComponent<{
    items: ToDoListItem[],
    onChange?: (item) => void
}> = ({ items, onChange }) => {
    const onRemoveButtonClick = (item) => {
        if(onChange) {
            onChange(item);
        }
    }
    const listItems = items.map(Q => <TodoItem onRemoveButtonClick={onRemoveButtonClick} item={Q}></TodoItem>)
    return <div>{listItems}</div>;
}


class Todo extends React.Component<{},ToDoState> {
    constructor(props) {
        super(props);
        this.state = {
            inputText: "",
            toDoList: [],
        };
    }
    onTextInput = (e: React.ChangeEvent<HTMLInputElement>) => {
        this.setState({
            inputText: e.target.value,
        })
    };
    onChange = (item) => {
        this.setState(
            {
                toDoList: this.state.toDoList.filter(x => item.todo != x.todo)
            }
        )
    };
    addList = () => {
        this.setState({
            inputText: "",
            toDoList: [...this.state.toDoList, {
                todo: this.state.inputText, checked: false
            }],
        })
    }
    render() {
        return (
            <div>

                <div>
                    <input value={this.state.inputText} onChange={this.onTextInput}></input>
                    {this.state.inputText}
                </div>
                <button onClick={this.addList}>Add</button>
                <TodoList onChange={this.onChange} items={this.state.toDoList}></TodoList>
            </div>
        );
    }
}

export default () => {
    return <Layout title="Todo"><Todo></Todo></Layout>
}