import React, { Component } from 'react'
import uuidv1 from 'uuid/v1'

class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      todos: [],
    }

    this.addTodo = this.addTodo.bind(this)
    this.deleteTodo = this.deleteTodo.bind(this)
  }

  addTodo() {
    const newTodo = {
      id: uuidv1(),
      text: this.input.value,
    }

    const todos = this.state.todos.slice()
    todos.push(newTodo)

    console.log(todos)

    this.setState({ todos })
  }

  deleteTodo(id) {

  }

  render() {
    return (
      <div>
        <ol>
          {this.state.todos.map(todo => {
            return <li key={todo.id} onClick={this.deleteTodo.bind(this, todo.id)}>{todo.text}</li>
          })}
        </ol>
        <input type="text" ref={input => this.input = input} />
        <button onClick={this.addTodo}>Save</button>
      </div>
    )
  }
}

export default App