import React, { Component } from 'react';
import FormValidator from './FormValidator'
import Popup from './Popup'
class Formulario extends Component {
    constructor(props) {
        super(props)
        this.validador = new FormValidator([
            {
                campo: "nome",
                metodo: "isEmpty",
                validoQuando:false,
                mensagem
:"Entre com um Nome"
            },
            {
                campo: "livro",
                metodo: "isEmpty",                
                validoQuando:false,
                mensagem:"Entre com um Livro"
            },
            {
                campo: "preco",
                metodo: "isInt",
                args:[{min:0, max:99999}],
                validoQuando:true,
                mensagem:"Entre com um Numerico"
            }
        ]);
        this.stateInicial = {
            nome: '',
            livro: '',
            preco: '',
            validacao: this.validador.valido()
        }
        this.state = this.stateInicial;
    }
    escutadordeInput = event => {
        const { name, value } = event.target;
        this.setState({
            [name]: value
        })
    }
    submitFormulario = () => {
        const validacao = this.validador.valida(this.state);
        if (validacao.isValid) {
            this.props.escutadorDeSubmit(this.state)
            this.setState(this.stateInicial);
        } else {
            const{ nome, livro, preco } = validacao
            const campos = [nome, livro, preco];
            const camposIvalidos = campos.filter(elem =>{
                return elem.isInvalid;
            })
            camposIvalidos.forEach(campo => {
               Popup.exibeMensagem('error', campo.mensagem) 
            });
        }
    }
    render() {
        const { nome, livro, preco } = this.state;
        return (
            <form>
                <div className="row">
                    <div className="input-field col s4">
                        <label className="input-field" htmlFor="nome">Nome</label>
                        <input className="validate" id="nome" type="text" name="nome" value={nome} onChange={this.escutadordeInput} />
                    </div>
                    <div className="input-field col s4">
                        <label className="input-field" htmlFor="livro">Livro</label>
                        <input className="validate" id="livro" type="text" name="livro" value={livro} onChange={this.escutadordeInput} />
                    </div>
                    <div className="input-field col s4">
                        <label className="input-field" htmlFor="preco">Preço</label>
                        <input className="validate" id="preco" type="text" name="preco" value={preco} onChange={this.escutadordeInput} />
                    </div>
                </div>
                <button className="waves-effect waves-light btn" onClick={this.submitFormulario} type="button">Salvar</button>
            </form>
        );
    }
}
export default Formulario;