import React, { Component } from 'react';
import { Link } from 'react-router-dom';

import axios from 'axios';

export default class Formulario extends Component {
    state = {
        id: '',
        name: '',
        email: '',
        city: '',
        country: '',
        job: '',
        message: '',
        alertClass: '',
        edit: false
    }

    sendData = () => {
        this.props.parentCallback('Edição');
    }

    //UNSAFE (Preciso pesquisar mais sobre carregamento do componente com requisições exeternas)
    UNSAFE_componentWillMount() {
        const url = window.location.href.split('/');
        const lastUrlIndex = url.slice(-1).pop();
        if(lastUrlIndex !== '' || lastUrlIndex !== 'formulario') {
            this.setState({ id: lastUrlIndex, edit: true });
        }
    }

    componentDidMount() {
        if(this.state.id !== 'formulario') {
            this.setState({ edit: true });
            this.sendData();
            this.getUser();
        } else {
            this.setState({ edit: false });
        }
    }

    getUser = async () => {
        let res =  await axios.post('http://localhost/php-react-api-crud/src/Api/endpoint.php', { auth: 'Bearer: e97838bcd746c15765c22e1f372c8761', request_type: 'read', id: this.state.id } );
        let { name, email, city, country, job } = res.data.dados[0];
        this.setState({ name, email, city, country, job });
    }

    handleChange = e => {
        this.setState({ [e.target.name]: e.target.value });
    }

    handleSubmit = e => {
        e.preventDefault();

        const person = {
            auth: 'Bearer: e97838bcd746c15765c22e1f372c8761',
            request_type: 'create',
            name: this.state.name,
            email: this.state.email,
            city: this.state.city,
            country: this.state.country,
            job: this.state.job
        };

        if(!this.state.edit) {
                axios.post('http://localhost/php-react-api-crud/src/Api/endpoint.php', person ).then(response => {
                const { dados } = response.data;
                if(response.status) {
                    this.setState({ alertClass: dados !== 'Cadastro realizado' ? 'alert alert-warning' : 'alert alert-success' , message: dados });
                    setTimeout(() => {
                        this.setState({ alertClass: '', message: '' });
                    }, 2000);
                    if(dados === 'Cadastro realizado') this.setState({ name: '', email: '', city: '', country: '', job: '' });
                }
            });
        } else {
            person.request_type = 'update';
            person.id = this.state.id;
            axios.post('http://localhost/php-react-api-crud/src/Api/endpoint.php', person ).then(response => {
                const { dados } = response.data;
                if(response.status) {
                    this.setState({ alertClass: dados !== 'CADASTRO ATUALIZADO' ? 'alert alert-warning' : 'alert alert-success' , message: dados });
                    setTimeout(() => {
                        this.setState({ alertClass: '', message: '' });
                    }, 2000);
                }
            });
        }
    }

    render() {
        return(
            <>
            <form onSubmit={this.handleSubmit}>
                <input type="hidden" name="id" value={this.state.id} />
                { this.state.message !== '' ? <div className={this.state.alertClass + ' text-center mt-5'} role="alert">
                    {this.state.message}
                </div> : <></>
                }
                <div className="form-group mt-5">
                    <div className="row">
                        <div className="col-md-6">
                            <label>Nome</label>
                            <input type="text" name="name" className="form-control form-control-sm" placeholder="Seu nome" onChange={this.handleChange} value={this.state.name} />
                        </div>
                        <div className="col-md-6">
                            <label>E-mail</label>
                            <input type="email" name="email" className="form-control form-control-sm" placeholder="exemplo@email.com" onChange={this.handleChange} value={this.state.email} />
                        </div>
                    </div>
                    <div className="row mt-3">
                        <div className="col-md-4">
                            <label>Cidade</label>
                            <input type="text" name="city" className="form-control form-control-sm" placeholder="Sua cidade natal" onChange={this.handleChange} value={this.state.city} />
                        </div>
                        <div className="col-md-4">
                            <label>Pais</label>
                            <input type="text" name="country" className="form-control form-control-sm" placeholder="Seu pais de origem" onChange={this.handleChange} value={this.state.country} />
                        </div>
                        <div className="col-md-4">
                            <label>Ocupação Profissional</label>
                            <input type="text" name="job" className="form-control form-control-sm" placeholder="Analista de algo" onChange={this.handleChange} value={this.state.job} />
                        </div>
                    </div>
                    <div className="row mt-5">
                        <div className="col-md-12 text-center">
                            {this.state.edit ? <button type="submit" name="" className="btn btn-sm btn-warning">Editar</button> : <button type="submit" name="" className="btn btn-sm btn-primary">Cadastrar</button>}
                            <Link
                                className="btn btn-sm btn-secondary ml-2"
                                to="/"
                                from="/formulario"
                            >Voltar</Link>
                        </div>
                    </div>
                </div>
            </form>
            </>
        );
    }
}