import React, { PureComponent, Fragment } from 'react';
//import { connect } from 'react-redux';
import { Modal, Button } from 'react-bootstrap';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUser, faKey } from '@fortawesome/free-solid-svg-icons';

import { menu_Validar_Opcion_Request } from '../../request/MenuRequest.jsx'

//import LocalStorage from '../../components/Util/LocalStorage/LocalStorage';
//const localStorageObject = new LocalStorage();
//librerias
//import { Warning, Error, Success } from '../../../config/notificacion';
import { Notificacion } from '../../components/Util/Notificacion/Notificacion.jsx';
import Session from '../../components/Util/session/index.jsx';
import Config from '../../components/Util/constantes.js';

class ModalSeguridad extends PureComponent {
    _isMounted = false;
    state = {
        username: '',
        password: ''
    }

    componentDidMount = () => {
        this._isMounted = true;
        const session = new Session();
        const _Usuario = session.get('UsuarioSCON');

        this.usuarioTemporal(_Usuario);
    }

    componentWillUnmount = () => {
        this._isMounted = false;
    }
    usuarioTemporal = (pUser) => {
        const session = new Session();
        //const usuario = result.Usuario;
        //session.set('tmpUsuario', usuario);
        session.set('tmpUsuarioIdCON', pUser);

    }


    autenticarOpcion = async () => {
        const { username, password } = this.state;
        let _Exitoso = false;
        const session = new Session();
        const _Empresa = session.get('empresaCON');
        const _Token = session.get('tokenCON');
        const _Usuario = session.get('UsuarioSCON');
        if (this.validarDatos(username, password, this.props.menuId, this.props.opcionId)) {
            const response = await menu_Validar_Opcion_Request(_Token, _Empresa, this.props.menuId, this.props.opcionId, username, password, '', '', -1, '', Config.Modulo);

            if (response.Exitoso) {
                this._isMounted && this.setState({ username: '', password: '' });
                this.usuarioTemporal(response.Login);
                Notificacion.success("Acceso válido.");
            }
            else {
                if (response.Mensaje) {
                    this.usuarioTemporal(_Usuario);
                    Notificacion.error(response.Mensaje);
                }
                else {
                    this.usuarioTemporal(_Usuario);
                    Notificacion.error('Ocurrió un error validando los credenciales de acceso.');
                }
            }
            this.props.onActionResult(response.Exitoso);
        }
    }

    validarDatos = (pUsername, pPassword, pMenuId, pOpcionId) => {
        //console.log(`pUsername: ${pUsername}, pPassword: ${pPassword}, pMenuId: ${pMenuId}, pOpcionId: ${pOpcionId}`);
        if (!pMenuId || isNaN(pMenuId) || pMenuId <= 0) {
            Notificacion.error("Un identificador de menú es requerido.");
            return false;
        }

        if (!pOpcionId || isNaN(pOpcionId) || pOpcionId <= 0) {
            Notificacion.error("Un identificador de opción de menú es requerido.");
            return false;
        }

        if (!pUsername || !pUsername.trim()) {
            Notificacion.error("Por favor ingrese un usuario.");
            return false;
        }

        if (!pPassword || !pPassword.trim()) {
            Notificacion.error("Por favor ingrese la contraseña.");
            return false;
        }

        return true;
    }

    onChangeInput = event => {
        let { name, value, maxLength } = event.currentTarget;
        if (maxLength && value && value.length > maxLength) {
            return;
        }
        this.setState({ [name]: value });
    }

    onKeyPressInput = event => {
        if (event.key === 'Enter') {
            this.autenticarOpcion();
        }
    }

    onHideModal = () => {
        this.setState({
            searchValue: '',
            selectedItem: null
        }, () => this.props.onHide());
    }

    render() {

        return (
            <Fragment>
                <Modal  show={this.props.show} animation={false} onHide={this.onHideModal}>
                    <Modal.Header >
                        <Modal.Title>{this.props.modalTitle ? this.props.modalTitle : "Requiere Permisos"}</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <div className="contaniner-fluid">
                            {this.props.preContent && <div className="row"><div className="col">{this.props.preContent}</div></div>}
                            <div className="rowSeg">
                                <div className="col">
                                    <p>Por favor ingrese sus credenciales para acceder a esta opción</p>
                                </div>
                            </div>
                            <div className="rowSeg">
                                <div className="col">
                                    <div className="input-group mb-3">
                                        <div className="input-group-addon">
                                            <span className="input-group-text"><FontAwesomeIcon icon={faUser} /></span>
                                        </div>
                                        <input name="username"
                                            type="text"
                                            className="form-control"
                                            placeholder="Nombre Usuario"
                                            maxLength="20"
                                            onChange={this.onChangeInput} />
                                    </div>
                                </div>
                            </div>
                            <div className="rowSeg">
                                <div className="col">
                                    <div className="input-group mb-3">
                                        <div className="input-group-addon">
                                            <span className="input-group-text"><FontAwesomeIcon icon={faKey} /></span>
                                        </div>
                                        <input name="password"
                                            type="password"
                                            className="form-control"
                                            placeholder="Contraseña"
                                            maxLength="100"
                                            onChange={this.onChangeInput}
                                            onKeyPress={this.onKeyPressInput}
                                        />
                                    </div>
                                </div>
                            </div>
                            {this.props.postContent && <div className="row"><div className="col">{this.props.postContent}</div></div>}
                        </div>
                    </Modal.Body >
                    <Modal.Footer>
                        <div className="tooltip2">
                            <span className="tooltiptext2">{this.props.cancelButtonLabel ? this.props.cancelButtonLabel : "Cerrar"}</span>
                            <Button className="btn btn-secondary" onClick={this.onHideModal}>{this.props.cancelButtonLabel ? this.props.cancelButtonLabel : "Cerrar"}</Button></div>
                        <div className="tooltip2">
                            <span className="tooltiptext2">{this.props.okButtonLabel ? this.props.okButtonLabel : "Ingresar"}</span>
                            <Button className="btn btn-primary" onClick={() => this.autenticarOpcion()}>{this.props.okButtonLabel ? this.props.okButtonLabel : "Ingresar"}</Button></div>
                    </Modal.Footer>
                </Modal >
            </Fragment>
        );
    }
}

const mapStateToProps = state => {
    return {
        usuario: state.usuario
    };
};

export default ModalSeguridad;