import * as React from 'react';
import { RouteComponentProps } from 'react-router';
import * as $ from "jquery";
import Errores from '../Errores'
import './css/Registro.css'

interface ErroresRegistro
{
    errores: string[]
}

export class Registro extends React.Component<RouteComponentProps<{}>, ErroresRegistro>
{

    componentWillMount()
    {
        return false;
    }
    constructor()
    {
        super()
        this.state = { errores: [] };
    }

    public render() {

       //function redireccionar()
       // {
       //     window.location.href = "/IniciarSesion";
       // }

        return (

            <div className="page-header header-filter" filter-color="purple" id="principal">
                <div className="container">
                    <div className="row">
                        <div className="col-md-10 ml-auto mr-auto">
                            <div className="card card-signup">
                                <div className="card-header card-header-la text-center">
                                    <h4>Bienvenido a Limits Arena</h4>
                                </div>
                                <div className="card-body">
                                    <div className="row">
                                        <div className="col-md-5 ml-auto">
                                            <div className="info info-horizontal">
                                                <div className="icon icon-info">
                                                    <i className="fa fa-gamepad"></i>
                                                </div>
                                                <div className="description">
                                                    <h4 className="info-title">Hazte Pro</h4>
                                                    <p className="description">
                                                        Crear una cuenta de Limits Arena para iniciar tu carrera profesional en eSports.
                                                    </p>
                                                </div>
                                            </div>
                                            <div className="info info-horizontal">
                                                <div className="icon icon-success">
                                                    <i className="fa fa-shield"></i>
                                                </div>
                                                <div className="description">
                                                    <h4 className="info-title">Club Profesional</h4>
                                                    <p className="description">
                                                        Crea un Club de eSports profesional y ficha los mejores jugadores con Limits Points.
                                                    </p>
                                                </div>
                                            </div>
                                            <div className="info info-horizontal">
                                                <div className="icon icon-rose">
                                                    <i className="fa fa-id-badge"></i>
                                                </div>
                                                <div className="description">
                                                    <h4 className="info-title">Jugador Libre</h4>
                                                    <p className="description">
                                                        Sé un jugador libre a espera de ser fichado por un Club profesional. Cada jugador es valorizado en Limits Points.
                                                    </p>
                                                </div>
                                            </div>
                                            <div className="info info-horizontal">
                                                <div className="icon icon-primary">
                                                    <i className="fa fa-sitemap"></i>
                                                </div>
                                                <div className="description">
                                                    <h4 className="info-title">Limits League Liga Profesional de Video Juegos</h4>
                                                    <p className="description">
                                                        Limits League es un circuito profesional para jugadores talentoso y prometedores de la escena competitiva eSports.
                                                Compite en nuestros torneos oficiales y gana premios en efectivo.
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="col-md-5 mr-auto">
                                            <p className="text-divider">Tú carrera profesional inicia aquí.</p>
                                                <Errores mensajes={this.state.errores} />
                                                <div className="card-body">
                                                    <div className="form-group">
                                                    <label htmlFor="" className="bmd-label-floating">Username</label>
                                                    <input type="text" className="form-control" id="inputUsername" defaultValue="AAAAAAAA" />
                                                        <span className="bmd-help">Nombre de usuario debe ser de 3 a 8 digitos</span>
                                                    </div>
                                                    <div className="form-group">
                                                    <label htmlFor="" className="bmd-label-floating">Email</label>
                                                    <input type="email" className="form-control" id="inputEmail" defaultValue="alexorlas96@gmail.com" />
                                                        <span className="bmd-help">Ingresa un email valido para verificar tu cuenta</span>
                                                    </div>
                                                    <div className="form-group">
                                                    <label htmlFor="" className="bmd-label-floating">Password</label>
                                                    <input type="password" className="form-control" id="inputPassword" defaultValue="Alexander.2018" />
                                                        <span className="bmd-help">Ingresa una contraseña con números y letras</span>
                                                    </div>
                                                    <div className="form-group">
                                                        <label htmlFor="" className="bmd-label-floating">Confirmar Password</label>
                                                        <input type="password" className="form-control" id="inputPasswordConfirmation" defaultValue="Alexander.2018" />
                                                        <span className="bmd-help">Por favor confirma tu contraseña</span>
                                                    </div>
                                                    <br />
                                                    <div className="form-check">
                                                        <label className="form-check-label">
                                                            <input className="form-check-input" id="confirmacionEdadMinima" type="checkbox" value="" required></input> Certifico que tengo más de 13 años
                                                            <span className="form-check-sign">
                                                                <span className="check"></span>
                                                            </span>
                                                        </label>
                                                    </div>
                                                    <br />
                                                    <div className="col-xs-12 text-center">
                                                        <p>Al registrarse usted acepta nuestros
                                                            <a href="#">Términos de Servicio</a> y
                                                            <a href="#">Políticas de Privacidad</a>.
                                                        </p>
                                                    </div>
                                                </div>
                                                <div className="footer text-center">
                                                    <button type="submit" onClick={() => { this.ConsumoAPI() }} className="btn btn-la">CREAR UNA CUENTA LIMITS ARENA</button>
                                                </div>
                                                <div className="col-xs-12 text-center">
                                                    <p>¿Ya tienes cuenta?
                                                        <a href="/iniciarsesion">Inicia Sesión</a>
                                                    </p>
                                                </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }

    ConsumoAPI()
    {
        var username = ((document.getElementById("inputUsername") as HTMLInputElement).value);
        var email = ((document.getElementById("inputEmail") as HTMLInputElement).value);
        var password = ((document.getElementById("inputPassword") as HTMLInputElement).value);
        var passwordConfirmation = ((document.getElementById("inputPasswordConfirmation") as HTMLInputElement).value);
        var checkbox = ((document.getElementById("confirmacionEdadMinima") as HTMLInputElement).checked);

        var mAge = false;

        if (username.length == 0)
        {
            this.setState({
                errores: ["El nombre de usuario no se puede dejar sin llenar"]
            });
            return false;
        }
        if (email.trim().length == 0) {
            this.setState({
                errores: ["El email no se puede dejar sin llenar"]
            });
            return false;
        }
        if (password.length == 0) {
            this.setState({
                errores: ["La contraseña no se puede dejar sin llenar"]
            });
            return false;
        }
        if (password != passwordConfirmation) {
            this.setState({
                errores: ["Las contraseñas no coinciden"]
            });
            return false;
        }
        if (!checkbox) {
            this.setState({
                errores: ["Debe verificar que tiene mínimamente 13 años"]
            });
            return false;
        } else {
            var mAge = true;
        }
        var datosUsuario = { Email: email, password: password, ConfirmPassword: passwordConfirmation, UserName: username };
        let self = this.state;
        fetch('api/Auth', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(datosUsuario)
        }).then((res) => {
            if (res.ok) {
                return res.json().then((mensaje) => {
                    window.location.href="/welcome"
                });
            } else {
                return res.json().then((error) => {
                    console.log(error[0])
                })
                }
            });
    }
}