import React from 'react';

class LoginModal extends React.Component {

    constructor(props) {
        super(props);
        this.onClose = this.onClose.bind(this);
        this.onValidar = this.onValidar.bind(this);
        this.onKeypress = this.onKeypress.bind(this);        
    }
    componentDidMount() {
        const { onClose } = this.props;
        $(this.modal).modal('show');
        $(this.modal).on('hidden.bs.modal', onClose);
    }
    onKeypress(e) {
        if (e.which == 13 || e.keyCode == 13) {
            this.onValidar();
        }
    }
    onClose() {
        const { onClose } = this.props;
        $(this.modal).modal('hide');
        onClose();
    }
    onValidar() {
        const { onValidar } = this.props;
        $(this.modal).modal('hide');
        onValidar();
    }
    render() {
        const { username, password,  onChange } = this.props;
          
        return (          
            <div className="modal fade" id="login-modal" data-backdrop="static" data-keyboard="false" tabIndex={-1} role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" ref={modal => this.modal = modal}>
                <div className="modal-dialog">
                    <div className="modal-content">
                        <div className="modal-header">
                            <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                            <h5 className="modal-title" id="exampleModalLabel">Validar Credenciales</h5>
                        </div>
                        <div className="modal-body">
                            <div className="row">
                                <div className="col-md-8 col-sm-12 col-md-offset-2">
                                    <p>Por favor ingrese sus credenciales para accesar a está opción</p>
                                    <input type="text" id="username" name="username" className="modal-input" placeholder="Usuario" onChange={onChange} value={username}  onKeyPress={this.onKeypress}/>
                                    <input type="password" id="password" name="password" className="modal-input" placeholder="Contraseña" onChange={onChange} value={password}  onKeyPress={this.onKeypress}/>
                                </div>
                            </div>
                        </div>
                        <div className="modal-footer">
                            <button type="button" className="btn btn-secondary" id="btn-close-modal" onClick={this.onClose} >Cerrar</button>
                            <button type="button" className="btn btn-success" id='btn-validar-modal' onClick={this.onValidar}>Validar</button>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}
export default LoginModal;