import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';




class EdicaoTexto extends Component{

//


  render() {
    return(


      <input item={this.props.item} value={this.props.valor} type="text" name={this.props.nome} />
  );
  }
}

class CampoTexto extends Component{

//


  render() {
    return(
      //sintaxe mais simples para declarar uma função
/*
      var funcao1 = function(parametro1) {
        return parametro1 + 1;
      }
      var funcao1 = (parametro1) => parametro1 + 1;*/

      <input onChange={(e) => this.props.onChangeDeTexto(e.target,this.props.nome)} type="text" name={this.props.nome} />
  );
  }
}


class Salvar extends Component{



  render() {
    return(
      <button onClick={this.salva} name={this.props.nome} value="Salvar">Salvar</button>

  );
  }
}

class FormularioAdd extends Component{



  render() {
    return(
      <form onSubmit={this.props.acao}>
      <CampoTexto onChangeDeTexto ={this.props.onChangeDeTexto} nome="NovaTarefa" />
      <Salvar nome="salvarNovaTarefa" />
      </form>

    );


  }
}

class ListaDeTarefas extends Component{


    render(){
      return(
      <div className="Lista">
        <ul>
          {this.props.tarefas.map((x,key)=> {
              var editor = null;
              if (this.props.edita == key)
                editor = (<EdicaoTexto item={key} valor={x} />);
              return (
                <li>
                    <a onClick={this.props.listClickHandler}>{x}</a>
                    {editor}
                </li>
              );
          })
          }
        </ul>
        </div>
    );


  }
}


class App extends Component {


  edicao(chave)
  {
    console.log('teste',chave);
  }

  stateCampo(evento,nomeDoCampo)
  {
    console.log(nomeDoCampo);
    let campos = {};
    campos[nomeDoCampo] = evento.value;
    this.setState(campos);
  }

  salva(evento){
    evento.preventDefault();
    console.log(this.state)
    this.setState({
      ListaDeItens: this.state.ListaDeItens.concat(this.state.NovaTarefa)
    });


  }


  constructor(props){
    super(props)
    this.state={
      ListaDeItens:['criar mockup','adicionar submit','atualizar lista','inserir API JSON'],
      edita:null,
    }
  }


  render() {
    console.log(this.state)
    return (
      <div className="App">
        <FormularioAdd onChangeDeTexto={(e,nomeDoCampo) => this.stateCampo(e,nomeDoCampo)} acao={(e) => this.salva(e)}/>
        <ListaDeTarefas listClickHandler={(e,key) => this.edicao(e,key)} edita={this.state.edita}tarefas={this.state.ListaDeItens}/>
      </div>
    );
  }
}

export default App;