import DashboardAdmin from "./DashboardAdmin";
import React, { Component, Fragment, useRef } from 'react';
import Cookies from 'universal-cookie';
import { InputText } from 'primereact/inputtext';
import { Button } from 'primereact/button';
import { Toast } from 'primereact/toast';

const baseUrl = "http://localhost:4000/user/loginUser";
const cookies = new Cookies();

class LoginLocalStorage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            form: {
                email: '',
                password: ''
            },
            errorEmail: false,
            errorPassword: false,
            logged: null
        }
    }

    handleChange = async e => {
        await this.setState({
            form: {
                ...this.state.form,
                [e.target.name]: e.target.value
            }
        });
    }

    validaciones = (data) => {
        let error = true;
        if (data.email == '') {
            this.setState({
                errorEmail: true
            })
            error = true;
        } else {
            this.setState({
                errorEmail: false
            })
        }
        if (data.password == '') {
            this.setState({
                errorPassword: true
            })
            error = true;
        } else {
            this.setState({
                errorPassword: false
            })
        }

        return error;

    }

    iniciarSesion = async () => {
        const data = {
            email: this.state.form.email,
            password: this.state.form.password
        }

        console.log(data);

        if (!this.validaciones(data)) {
            this.setState({
                email: true,
                password: true
            })
            await fetch(baseUrl, {
                cache: 'no-cache',
                method: 'POST',
                body: JSON.stringify(data),
                headers: {
                    'Content-Type': 'application/json'
                }
            })
                .then(response => {
                    if (response.status != 201)
                        console.log('Ocurrió un error con el servicio: ' + response.status);
                    else return response.json();
                })
                .then(response => {
                    console.log(response.message);

                    if (response.message) {
                        const user = response.message;
                        cookies.set('id', user._id, { path: "/" });
                        cookies.set('name', user.name, { path: "/" });
                        cookies.set('email', user.email, { path: "/" });
                        cookies.set('type', user.user_type, { path: "/" });
                        if (user.user_type != '1') {
                            cookies.set('community_id', user.community_id, { path: "/" });
                        }
                        // alert(`Bienvenido ${user.name}`);
                        document.getElementById('notification').hidden = true;
                        document.getElementById('notification2').hidden = false;


                        document.getElementById("message2").innerHTML = `Bienvenido ${user.name}`;

                        //document.getElementById("message").remove('p-message p-message-error')
                        // document.getElementById("message").append(`Bienvenido ${user.name}`);
                        // document.getElementById("message").classList('p-message p-message-success')
                        // window.location.href = "/";


                    } else {
                        document.getElementById('notification2').hidden = true;
                        document.getElementById('notification').hidden = false;


                        //alert('El usuario o la contraseña no son correctos');
                        document.getElementById("message").innerHTML = "El usuario o la contraseña son incorrectos";
                        // document.getElementById("message").remove('p-message p-message-success')
                        // document.getElementById("message").append('El usuario o la contraseña son incorrectos');
                        // document.getElementById("message").add.className('p-message p-message-error')
                    }
                })
                .catch(error => {
                    console.log(error);
                })
        }
    }

    componentDidMount() {
        if (cookies.get('email')) {
            window.location.href = "/";
        }
    }

    renderErrorMessage = (name) =>
        name === this.state.errorMessages.name && (
            <div className="error">{this.state.errorMessages.message}</div>
        );

    errors = {
        email: "Correo requerido",
        pass: "Contraseña requerida"
    };

    render() {
        return (

            <Fragment>


                <div className="grid ">
                    <div className="col-10 xl:col-8">
                        <div id="notification" className="p-message p-message-error" hidden={true} >
                            <div className="card">
                                <h5 className='card-header' id="message">
                                </h5>
                            </div>
                        </div>
                        <div id="notification2" className="p-message p-message-success" hidden={true} >
                            <div className="card">
                                <h5 className='card-header' id="message2">
                                </h5>
                            </div>
                        </div>


                    </div>
                    <div className="col-10 xl:col-8">

                        <div className="card">
                            <h5 className='card-header'>Iniciar Sesión</h5>
                            <div className="p-fluid formgrid grid">

                                <div className="field col-12 md:col-12">
                                    <label htmlFor="email">Correo electrónico</label>
                                    <div className="p-0 col-12 md:col-12">
                                        <div className="p-inputgroup">
                                            <span className="p-inputgroup-addon p-button p-icon-input-khaki">
                                                <i className="pi pi-user"></i>
                                            </span>
                                            <InputText id="email"
                                                type="email"
                                                name="email"
                                                onChange={this.handleChange}
                                                placeholder='Correo electrónico'
                                                className={this.state.errorEmail ? 'p-invalid' : ''}

                                            />
                                        </div>
                                        {this.state.errorEmail && (
                                            <small className="p-invalid">Correo electrónico es requerido</small>
                                        )}

                                    </div>
                                </div>
                                <div className="field col-12 md:col-12">
                                    <label htmlFor="v">Contraseña</label>
                                    <div className="p-0 col-12 md:col-12">
                                        <div className="p-inputgroup">
                                            <span className="p-inputgroup-addon p-button p-icon-input-khaki">
                                                <i className="pi pi-lock"></i>
                                            </span>
                                            <InputText id="password"
                                                type="password"
                                                name="password"
                                                onChange={this.handleChange}
                                                placeholder='Contraseña'
                                                className={this.state.errorPassword ? 'p-invalid' : ''}
                                            />
                                        </div>
                                        {this.state.errorPassword && (
                                            <small className="p-invalid">Contraseña es requerida</small>
                                        )}
                                    </div>
                                </div>

                                <Button label="Iniciar sesión" type="button" onClick={() => this.iniciarSesion()}></Button>
                            </div>
                        </div>
                    </div>
                </div>
            </Fragment>



        );
    }
}

export default LoginLocalStorage;