text: import React, { Component } from 'react'
  import PropTypes from 'prop-types'
  import classnames from 'classnames'
  import TodoTextInput from './TodoTextInput'
  
  export default class TodoItem extends Component {
    static propTypes = {
      todo: PropTypes.object.isRequired,
      editTodo: PropTypes.func.isRequired,
      deleteTodo: PropTypes.func.isRequired,
      completeTodo: PropTypes.func.isRequired
    }
  
    state = {
      editing: false
    }
  
    
    handleDoubleClick = () => {
      this.setState({ editing: true })
    }
  
    handleSave = (id, text) => {
      if (text.length === 0) {
        this.props.deleteTodo(id)
      } else {
        this.props.editTodo(id, text)
        // this.props.updateTodoToDB(id, {...this.props.todo, text: text})
  
      }
      this.setState({ editing: false })
    }
  
    render () {
      const { todo, completeTodo, deleteTodo, deleteTodoToDB, updateTodoToDB } = this.props
  
      let element
      if (this.state.editing) {
        element = (
          <TodoTextInput
            text={todo.text}
            editing={this.state.editing}
            onSave={text => this.handleSave(todo.id, text)}
          />
        )
      } else {
        element = (
          <div className='view'>
            <input
              className='toggle'
              type='checkbox'
              checked={todo.completed}
              onChange={() => {
                completeTodo(todo.id)
                updateTodoToDB(todo.id, {...todo, completed: !todo.completed})
              }}
            />
            <label onDoubleClick={this.handleDoubleClick}>{todo.text}</label>
            <button className='destroy' onClick={() => {
              deleteTodo(todo.id)
              deleteTodoToDB(todo.id)
              }} />
          </div>
        )
      }
  
      return (
        <li
          className={classnames({
            todo: true,
            completed: todo.completed,
            editing: this.state.editing
          })}
        >
          {element}
        </li>
      )
    }
  }
  