import React, { Component } from "react";
import { AppConsumer } from "./app-context";
import { Grid, Button, Input } from "semantic-ui-react";

const TodoInput = props => {
  let todo;
  return (
    <AppConsumer>
      {({ addTodo }) => (
        <form
          onSubmit={e => {
            e.preventDefault();
          }}
        >
          <Input
            type="text"
            id="todoInput"
            onChange={e => {
              todo = e.target.value;
            }}
            placeholder="type todo here"
          />
          <Button
            type="submit"
            onClick={() => {
              if (todo) {
                addTodo(todo);
                const inputEl = document.getElementById("todoInput");
                inputEl.value = "";
              }
            }}
          >
            Add Todo
          </Button>
        </form>
      )}
    </AppConsumer>
  );
};

const DisplayTodos = props => {
  return (
    <AppConsumer>
      {({ todos, completed }) => {
        const notCompleted = todos.filter(todo => {
          if (todo.completed === false) {
            return todo;
          }
        });

        return (
          <div>
            <p>All your todos: {notCompleted.length}</p>
            <ol>
              {todos.length > 0
                ? todos.map(todo => (
                    <li
                      className={
                        todo.completed
                          ? "completed todo align-left"
                          : "todo align-left"
                      }
                      key={todo.id}
                      onClick={() => completed(todo.id)}
                    >
                      {todo.todo}
                      {"  "}
                      <span className={todo.completed ? "date" : "date"}>
                        {new Date(todo.createdAt).toString()}
                      </span>
                    </li>
                  ))
                : ""}
            </ol>
          </div>
        );
      }}
    </AppConsumer>
  );
};

class TodoApp extends Component {
  render() {
    return (
      <div className="todos">
        <Grid columns={1} className="ui center aligned">
          <Grid.Row>
            <Grid.Column className="todo-body" width={12}>
              <h2>Simple Todo</h2>
              <TodoInput />
              <div id="display-todos">
                <DisplayTodos className="align-left" />
              </div>
            </Grid.Column>
          </Grid.Row>
        </Grid>
      </div>
    );
  }
}

export default TodoApp;