import React from 'react';
import Modal from 'react-modal';

import{menu_Validar_Opcion} from '../../../request/seguridad';

//librerias
import { Warning, Error, Success } from '../../../config/notificacion';
import Session from '../session';
const Progress = NProgress;

class modalSeguridad extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            user:'',
            password:''
        }
    }

onClickmodal=()=>{

 this.onLogin();

}

onChange = (e) => {
    e.preventDefault();
    const name = e.target.id;
    const value = e.target.value;
    this.setState({ [name]: value });
}
onKeypress = (e)=> {
    if (e.which == 13 || e.keyCode == 13) {
        this.onLogin();
    }
}



    onLogin = async () => {
        // this.props.history.replace(LoginRoutes.Home);
        //this.props.history.replace(RutasUrl.homeLayout);
        const { user, password } = this.state;
        const { menuIdSeg, opcionIdSeg, descSeg, tipoDocSeg, docSeg, pantallaSeg } = this.props;
        if (user === '' || password === '') {
            if (user === '') {
                Warning({ text: 'Ingrese el Usuario', progress: Progress });
            }
            if (password === '') {
                Warning({ text: 'Ingrese la contraseña', progress: Progress });
            }

            Progress.done();
        } else {
            const result = await menu_Validar_Opcion(menuIdSeg, opcionIdSeg, user, password, descSeg, tipoDocSeg, docSeg, pantallaSeg);
            if (result.ID !== undefined) {
                if (result.MsgError.trim().length > 0) {
                    Error({ text: 'Error: ' + result.MsgError, progress: Progress });
                    this.props.cerrarModal();
                } else {
                    if (result.ID > 0) {
                        this.usuarioTemporal();
                        this.props.onFuncion();
                        this.props.cerrarModal();
                    } else {
                        Error({ text: 'No está autorizado para realizar esta acción.', progress: Progress });
                        this.props.cerrarModal();
                    }
                }
            }
            else {

                Error({ text: 'Error: ' + result, progress: Progress });
                this.props.cerrarModal();


            }
        }
    }

    usuarioTemporal=()=>{
        const session = new Session();
        //const usuario = result.Usuario;
        //session.set('tmpUsuario', usuario);
        session.set('tmpUsuarioIdCON', this.state.user);

    }

    render() {
        const { selectedModal, contentLabel,  label } = this.props;
        const customStyles = {
            content: {
                position: 'fixed',
                position: 'absolute',
                top: '25%',
                left: '29%',
                right: '29%',
                bottom: '29%',
                //top: '50%',
                //left: '50%',
                //right: 'auto',
                with: '50%',
                height: '52%',
                //bottom: 'auto',
                //marginRight: '-50%',
                //transform: 'translate(-50%, -50%)',
                padding: '5px'
            },
            overlay: {
                backgroundColor: 'rgba(0, 0, 0, 0.75)',
            },
        };
        return (
            <Modal
                isOpen={selectedModal}
                contentLabel={contentLabel}
                style={customStyles}
                ariaHideApp={false}
            >
                <div className="">
                    <div className="">
                        <div className="modal-header text-center">
                            <button type="button" className="close" data-dismiss="modal" aria-label="Close" onClick={this.props.cerrarModal}>
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <h4 className="modal-title" id="modalSeg">{label}</h4>
                            <p>Por favor autorice la transacción</p>
                            
                        </div>
                        <div className="modal-body">
                           {/*} <div className="row">
                                <div className="col-md-8 col-sm-12 col-md-offset-2">
                                    <input type="text" className="login" id="user" placeholder="Usuario" onChange={this.onChange} value={this.state.user} onKeyPress={this.onKeypress} maxLength={20} />
                                    <input type="password" className="login" id="password" placeholder="Contraseña" onChange={this.onChange} onKeyPress={this.onKeypress} maxLength={50} />
                                </div>
        </div> */}
                            <div className="row">
                                <div className="col-md-12">
                                    <div className="form-group">
                                        <span className="input-label">Usuario</span>
                                        <input type="text" name="usuario" id="user" className="form-control" placeholder= "Usuario" onChange={this.onChange} maxLength={20} value={this.state.user}
                                            onKeyPress={this.onKeypress} />
                                    </div>
                                </div>
                                <div className="col-md-12 top20">
                                    <div className="form-group">
                                        <span className="input-label">Contraseña</span>
                                        {/*<span className="error">{error}</span>*/}
                                        <input type="Password" name="password" id="password" className="form-control" placeholder="Contraseña" onChange={this.onChange} maxLength={50}
                                            onKeyPress={this.onKeypress} />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="modal-footer">
                            {/*<button type="button" className="btn btn-secondary" data-dismiss="modal" onClick={this.props.cerrarModal}>Cerrar</button>
    <button type="button" className="btn btn-primary" onClick={this.onLogin}>Seleccionar</button>*/}

                            <div className="row">
                                <div className="col-md-6 col-xs-6">
                                    <div className=" text-center">
                                        <button className="btn btn-sm pull-right flipInX animated" style={{ width: '100%' }}
                                            onClick={this.props.cerrarModal}>Cancelar</button>
                                    </div>
                                </div>
                                <div className="col-md-6 col-xs-6">
                                    <div className=" text-center">
                                        <button className="btn btn-sm pull-right flipInX animated" style={{ width: '100%' }}
                                            onClick={this.onLogin}>Ingresar</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </Modal>
        )



    }
}
export default modalSeguridad;