import React, { Fragment, memo, useEffect, useState, useRef } from 'react';
import { useHistory, withRouter } from 'react-router-dom';

import { farmatearFechaEstandarHora, addDays, farmatearMontos, fechaPrimerDia, fechaUltimoDia, listaRangoNumeros, itemSelect, validarInt } from '../../../components/Util/Util.jsx';
import Config from '../../../components/Util/constantes.js';
import { SiteRutas } from '../../../request/RutasConfig.jsx';

import DesbloquearAsientoInt from './desbloquearAsientoInt.jsx';
import BotonArriba from '../../../components/UI/botonArriba/botonArriba.jsx';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCheck, faReply, faSync } from '@fortawesome/free-solid-svg-icons';

import { useSessionStorage } from '../../../components/Util/Hooks/useSessionStorage.jsx';
import { Notificacion } from '../../../components/Util/Notificacion/Notificacion.jsx';
import ModalSpinner from '../../../components/UI/modalSpinner/modalSpinner.jsx';
import Swal from 'sweetalert2';

import {
    EncabezadoAsiento_ListarUtilizado_Request, EncabezadoAsiento_Desbloquear_Request
} from '../../../request/MantenimientosRequest.jsx';
import { Empresa_Consulta_Request } from "../../../request/SeguridadRequest.jsx";
import { Obtener_MenuOpciones_Lista_Request, Obtener_MenuNombre_Request } from "../../../request/MenuRequest.jsx";
import ModalSeguridad from "../../Seguridad/ModalSeguridad.jsx";
import optSeg from '../../../components/Util/seg-menu-opciones.js';
import moment from 'moment';

function DesbloquearAsiento(props) {

    let historyMenu = useHistory();
    const [empresa, setEmpresa] = useSessionStorage('empresaCON', 0);
    const [datosEmpresa, setDatosEmpresa] = useState(null);
    const [token, setToken] = useSessionStorage('tokenCON', '');
    const [usuario, setUsuario] = useSessionStorage('usuarioCON');
    const _AnnoActual = new Date().getFullYear();
    const _ListaAnnos = listaRangoNumeros(Config.anoAntiguedad, _AnnoActual);

    const [Datos, setDatos] = useState({
        Estado: { value: '', attributes: { readOnly: false, focus: false, label: 'Estado', hidden: 'unset' } },
        fecMesAno: { value: moment().startOf('month').toDate(), attributes: { readOnly: false, focus: false, label: 'Período', hidden: 'unset', minDate: fechaPrimerDia(new Date(Config.anoAntiguedad, 0, 1)), maxDate: fechaUltimoDia(new Date(_AnnoActual, 11, 1)), ListaAnnos: _ListaAnnos, formatDate: Config.formatoMesAno } },
        Botones: { value: 0.0, attributes: { readOnly: false, focus: false, label: '', float: 'left', hidden: 'unset' } },
    });
    const [spinnerModal, setSpinnerModal] = useState(undefined);
    const [spinnerLabel, setSpinnerLabel] = useState('');
    const [spinnerTipo, setSpinnerTipo] = useState(1);

    //Seguridad
    const [usuarioS, setUsuarioS] = useSessionStorage('UsuarioSCON');
    const [menuId, setMenuId] = useState(0);
    const [menuOpciones, setMenuOpciones] = useState([]);
    const [showModalSeguridad, setShowModalSeguridad] = useState(false);
    const [opcionValidar, setOpcionValidar] = useState(0);
    const [opcionValidarNombre, setOpcionValidarNombre] = useState('');

    //datos del formulario    
    const listaEstado = Config.listaEstadoAsientos;
    const [selectedEstado, setSelectedEstado] = useState(listaEstado[0]);
    const [listaDatos, setListaDatos] = useState([]);
    const [listaDatosSel, setListaDatosSel] = useState([]);
    const columnas = [
        { dataField: 'pNumero', text: 'Número', csvText: 'Numero', hidden: false, sort: true, editable: false },
        { dataField: 'Digitado', text: 'Digitado', hidden: false, sort: true, formatter: (row, cell) => { return farmatearFechaEstandarHora(new Date(cell.Digitado)) }, editable: false },
        { dataField: 'Descripcion', text: 'Descripción', csvText: 'Descripcion', hidden: false, sort: true, editable: false },
        { dataField: 'llave', text: 'llave', hidden: true, sort: true, editable: false, csvExport: false },
    ];
    const cellEdit = { mode: 'click', blurToSave: true, autoSelectText: true };
    const selectRow = { mode: 'checkbox', bgColor: '#d73220',style: { color: '#ffffff' }, clickToSelect: true, onSelect: (row, isSelect) => onRowSelect(row, isSelect), onSelectAll: (isSelect, rows) => handleOnSelectAll(isSelect, rows), hideSelectColumn: false };

    const botones = [
        {
            name: "btnHomeC",
            clase: "btn btn-sm pull-right flipInX animated",
            evento: () => volverAtras(),
            leyenda: "",
            iclase: faReply,
            tooltip: "Volver"
        },
        {
            name: "btnAceptar",
            clase: "btn btn-sm pull-right flipInX animated",
            evento: () => handleAceptar(),
            leyenda: "",
            iclase: faCheck,
            tooltip: "Aceptar"
        }
    ];

    const botonFiltro = [

        {
            name: "btnRefescar",
            clase: "btn btn-sm pull-right flipInX animated",
            evento: () => {
                spinnerModalMostrar(true, 'Cargando Datos', 3);
                cargarListaDatos();
                spinnerModalMostrar(false, '', 3);
            },
            leyenda: "",
            iclase: faSync,
            tooltip: "Refrescar"
        },
    ]

    const spinnerModalMostrar = (pSpinnerModal, pSpinnerLabel, pSpinnerTipo) => {
        setSpinnerModal(pSpinnerModal);
        setSpinnerLabel(pSpinnerLabel);
        setSpinnerTipo(pSpinnerTipo);
    };

    //Seguridad
    const cargarMenuOpciones = async (pModuloId, pUsuarioId, pMenuId) => {
        try {

            let listMO = await Obtener_MenuOpciones_Lista_Request(token, pModuloId, pUsuarioId, pMenuId);
            if (listMO.Exitoso === false) {
                return null;
            }
            return listMO.Datos;
        }
        catch (err) {
            Notificacion.error(`Error: cargarMenuOpciones.`);
        }
    };

    const cargarMenuNombre = async (pModulo, pMenuNombre) => {
        try {
            let listMON = await Obtener_MenuNombre_Request(token, pModulo, pMenuNombre);
            if (listMON.Exitoso == false) {
                return null;
            }
            return listMON.Datos;
        }
        catch (err) {
            Notificacion.error(`Error: cargarMenuNombre.`);
        }
    };

    const validarMenuOpcion = (pOpcion) => {
        let validar = false;
        let _menuOpciones = menuOpciones;
        const optSegopt = optSeg.TOpciones_Menu;
        let resultado = _menuOpciones.filter((item) => item.Opcion_Nombre == pOpcion);
        if (resultado.length > 0) {
            if (resultado[0].Opcion_Validar) {
                setShowModalSeguridad(true); setOpcionValidar(resultado[0].Opcion_Id); setOpcionValidarNombre(pOpcion);
                validar = true;
            }
        } else {
            setShowModalSeguridad(true); setOpcionValidar(resultado[0].Opcion_Id); setOpcionValidarNombre(pOpcion);
            validar = true;
        }
        return validar;
    };

    const handleCerrarModal = () => setShowModalSeguridad(false);

    const onActionResultModal = (pValido) => {
        if (pValido) {
            let _OpcionNom = opcionValidarNombre;
            setShowModalSeguridad(false); setOpcionValidar(0); setOpcionValidarNombre('');
            const _optSegopt = optSeg.TOpciones_Menu;

            switch (_OpcionNom) {
                case _optSegopt.Desbloquear.value:
                    handleDesbloquearSel();
                    break;
                default:
                    break;
            }
        }
    };

    useEffect(() => {

        const carga = async () => {
            await cargarDatos();
        }
        carga();

    }, []);

    const cargarDatos = async () => {

        try {

            let spinnerLabel = 'Cargando datos...';
            spinnerModalMostrar(true, spinnerLabel, 3);

            await cargarListaDatos();

            const _datosEmpresa = await cargarEmpresa();
            setDatosEmpresa(_datosEmpresa);

            const _MenuNomb = await cargarMenuNombre(Config.Modulo, optSeg.TMenuSistema.Asientos.value);
            let _menuId = 0;

            if (_MenuNomb.ID != undefined) {
                _menuId = _MenuNomb.ID;
            }
            const _UsuarioS = usuarioS;
            let _menuOpciones = null;
            if (_menuId > 0) {
                _menuOpciones = await cargarMenuOpciones(Config.Modulo, _UsuarioS, _menuId);
            }
            setMenuId(_menuId), setMenuOpciones(_menuOpciones)

        } catch (e) {
            Notificacion.error(e.message);
        }
        finally {
            spinnerModalMostrar(false, '', 3);
        }
    };

    const volverAtras = () => {
        historyMenu.push(SiteRutas.Asientos);
    }


    const cargarListaDatos = async () => {
        const response = await EncabezadoAsiento_ListarUtilizado_Request(token, empresa, selectedEstado.value, Datos.fecMesAno.value, true);

        if (response.Exitoso) {
            setListaDatos(response.Datos);
        } else {
            setListaDatos([]);
        }
    };

    const cargarEmpresa = async () => {
        let response = await Empresa_Consulta_Request(token, empresa);

        if (response.Exitoso) {
            return (response.Datos);
        } else {
            Notificacion.error(response.Mensaje);
            volverAtras();
        }
        return null;
    };

    const handleAceptar = () => {

        const optSegopt = optSeg.TOpciones_Menu;
        let opcionValidar = optSegopt.Desbloquear.value;

        let validar = validarMenuOpcion(opcionValidar);

        if (!validar) {
            handleDesbloquearSel();
        }

    }

    const handleDesbloquearSel = () => {

        let resultado = false;

        Swal.fire({
            title: 'Desbloquear',
            html: '<h4>¿Desea desbloquear los asientos seleccionados?',
            type: 'question',
            showCancelButton: true,
            confirmButtonColor: '#10a599',
            cancelButtonColor: '#d33',
            confirmButtonText: '<h5><i class="fa fa-check fa-fw"></i> Sí</h5>',
            cancelButtonText: '<h5><i class="fa fa-remove fa-fw"></i> No</h5>',
            reverseButtons: true,
            allowOutsideClick: false,
        }).then((result) => {
            if (result.value) {
                resultado = true;
                Desbloquear();
            } else if (result.dismiss === Swal.DismissReason.cancel) {
                resultado = false;
            }
        });

    }

    const Desbloquear = async () => {

        if (listaDatosSel.length > 0) {
            const _listaAsientos = listaDatosSel.join(',');
            spinnerModalMostrar(true, `Aplicando asientos que cumplen con los criterios seleccionados`, 3);
            const response = await EncabezadoAsiento_Desbloquear_Request(token, _listaAsientos, empresa, usuario);
            spinnerModalMostrar(false, '', 3);

            if (response.Exitoso) {
                Notificacion.success(`Proceso realizado satisfactoriamente.`);
                volverAtras();
            } else {
                Notificacion.error(`Error: ${response.Mensaje}`);
            }
        } else {
            Notificacion.warning('Debe seleccionar al menos un registro.');
        }
    }

    const handleSelectEstado = (selEstado) => {

        setSelectedEstado(selEstado);

    }

    const onhandleChangeDate = async (date, id) => {
        const name = id;
        const value = date;
        let newAttributes = Datos[name].attributes;

        const _Datos = Object.assign({}, Datos, { [name]: { value: value, attributes: newAttributes } });

        setDatos(_Datos);

    }

    const onRowSelect = (row, isSelect) => {

        let lista = [...listaDatosSel];

        if (isSelect) {
            lista.push(row.id);
        } else {
            lista = lista.filter(x => x !== row.id);
        }

        setListaDatosSel(lista);

        return true;

    }

    const handleOnSelectAll = (isSelect, rows) => {

        if (isSelect) {
            setListaDatosSel(rows.map(x => x.id));
            return rows.map(x => x.id);
        } else {
            setListaDatosSel([]);
            return [];
        }

    }

    return (
        <Fragment>
            <DesbloquearAsientoInt
                titulo={"Desbloqueo de Asientos"}
                Datos={Datos}
                listaDatos={listaDatos}
                botones={botones}
                handleSelectEstado={handleSelectEstado}
                listaEstado={listaEstado}
                selectedEstado={selectedEstado}
                onhandleChangeDate={onhandleChangeDate}
                selectRow={selectRow}
                cellEdit={cellEdit}
                columnas={columnas}
                botonFiltro={botonFiltro}
            />
            <ModalSpinner
                selectedModal={spinnerModal}
                contentLabel={'spinnerModalProgress'}
                label={spinnerLabel}
                tipoSpinner={spinnerTipo}
            />
            <ModalSeguridad
                modalTitle={'Requiere Permisos'}
                menuId={menuId}
                opcionId={opcionValidar}
                show={showModalSeguridad}
                onActionResult={onActionResultModal}
                onHide={handleCerrarModal}
            />
            <BotonArriba Delay={10} Visible={100} />
        </Fragment>

    );

};

export default withRouter(memo(DesbloquearAsiento));