import React, { Fragment, useState, useEffect, useContext } from 'react';
import OrdenesInt from './OrdenesInt.jsx';
import { OrdenesRequest } from '../../components/Requests/index.jsx';
import LocalStorage from '../../components/LocalStorage/index.jsx';
import { baseUrl } from '../../config.jsx';
import { baseRelUrl } from '../../request/PathConfig.js';

import moment from 'moment';
import { Notificacion } from '../../components/Common/Notification/index.jsx';
import ModalSpinner from '../../components/modalSpinner/modalSpinner.jsx';
import { UsuarioContext, SucursalesContext, SucursalContext } from '../../Context.jsx';

const Ordenes = (props) => {

    const pDatos = {
        Desde: { value: moment().add(-1, 'M').toDate(), attributes: { readOnly: false, focus: false, label: "Desde", hidden: "block", minDate: moment("1900/01/01").toDate(), maxDate: moment().toDate(), } },
        Hasta: { value: moment().toDate(), attributes: { readOnly: false, focus: false, label: 'Hasta', hidden: "block", minDate: moment("1900/01/01").toDate(), maxDate: moment().toDate(), }, },
        NDias: { value: 0 },
    };
    const [Datos, setDatos] = useState(pDatos);
    const [TotalOrdenes, setTotalOrdenes] = useState(0);
    const [CarritosAbandonados, setCarritosAbandonados] = useState(0);
    const [PromedioAbandono, setPromedioAbandono] = useState(0);
    const [PromedioDiario, setPromedioDiario] = useState(0);
    const [PromedioIngresos, setPromedioIngresos] = useState(0);
    const [PromedioPedidos, setPromedioPedidos] = useState(0);
    const [TopAbandonados, setTopAbandonados] = useState([]);
    const [TopMasVendidos, setTopMasVendidos] = useState([]);
    const [ArticuloSeleccionado, setArticuloSeleccionado] = useState(null);
    const [mostrarSpinnerModal, setMostrarSpinnerModal] = useState({ mostrar: false, label: '', tipo: 3 });
    const { Sucursal, setSucursal } = useContext(SucursalContext);
    const { Sucursales, setSucursales } = useContext(SucursalesContext);
    const { Usuario, setUsuario } = useContext(UsuarioContext);
    const TopN = 10;

    useEffect(() => {

        if (document.referrer === "") {
            window.location.href = `${baseRelUrl}Error?Mensaje=La conexión no es válida`
        }

        VerificaParametros();
        VerificaMenuActivo();
    }, [])

    useEffect(() => {

        const carga = async () => {

            let _Datos = { ...Datos }

            if (LocalStorage.get('Desde') !== null && LocalStorage.get('Hasta')) {
                _Datos.Desde.value = moment(LocalStorage.get('Desde')).toDate();
                _Datos.Hasta.value = moment(LocalStorage.get('Hasta')).toDate();
            } else {
                LocalStorage.set('Desde', _Datos.Desde.value);
                LocalStorage.set('Hasta', _Datos.Hasta.value);
            }

            await cargarDatos(_Datos);
            setDatos(_Datos);

        }

        carga();

    }, [Sucursal]);

    const spinnerModalMostrar = (pSpinnerModal, pSpinnerLabel, pSpinnerTipo) => {

        setMostrarSpinnerModal({ mostrar: pSpinnerModal, label: pSpinnerLabel, tipo: pSpinnerTipo });

    }

    const VerificaMenuActivo = () => {

        const current = location.pathname;

        let navItems = document.querySelectorAll('li.nav-item');

        for (let i = 0, len = navItems.length; i < len; i++) {
            if (navItems[i].childNodes.length > 0 && navItems[i].childNodes[0].getAttribute("href") !== null) {
                if (navItems[i].childNodes[0].getAttribute("href").indexOf(current) !== -1) {
                    navItems[i].className += " active";
                } else {
                    navItems[i].className = navItems[i].className.replace("active", "")
                }
            }
        }

    }

    const VerificaParametros = () => {

        const token = LocalStorage.get('token');
        const emp_id = LocalStorage.get('emp_id');
        const suc_id = LocalStorage.get('suc_id');
        const id = LocalStorage.get('id');

        if (token === null || emp_id === null || suc_id === null || id === null) {

            window.location.href = baseUrl + 'Error?Mensaje=La conexión no es válida';

        } else {

            if (Sucursal == null && LocalStorage.get('suc_lista') !== null) {
                let listaSuc = LocalStorage.get('suc_lista');

                listaSuc = listaSuc.filter(x => parseInt(x.Id) === parseInt(suc_id));
                setSucursales(LocalStorage.get('suc_lista'));

                if (listaSuc.length > 0) {
                    setSucursal(listaSuc[0]);
                }
            }

            if (Usuario === null && LocalStorage.get('usuario') !== null) {
                setUsuario(LocalStorage.get('usuario'));
            }

        }

    }

    const cargarDatos = async (_Datos) => {

        try {

            spinnerModalMostrar(true, '', 3);

            _Datos.Desde.attributes.maxDate = moment(_Datos.Hasta.value).toDate();
            _Datos.Hasta.attributes.minDate = moment(_Datos.Desde.value).toDate();
            _Datos.Hasta.attributes.maxDate = moment().toDate();

            const Desde = moment(_Datos.Desde.value);
            const Hasta = moment(_Datos.Hasta.value);

            _Datos.NDias.value = (Hasta.diff(Desde, 'days'));

            const response = await OrdenesRequest.ObtenerDatosOrdenes(LocalStorage.get('token'), LocalStorage.get('emp_id'), LocalStorage.get('suc_id'), moment(Desde).format('YYYY/MM/DD'), moment(Hasta).format('YYYY/MM/DD'), TopN);

            if (response.Exitoso) {

                setTotalOrdenes(response.Datos.TotalOrdenes);
                setCarritosAbandonados(response.Datos.CarritosAbandonados);
                setPromedioAbandono(parseFloat(response.Datos.PromedioAbandono).toFixed(2));
                setPromedioDiario(parseFloat(response.Datos.PromedioDiario).toFixed(2));
                setPromedioIngresos(response.Datos.PromedioIngresos);
                setPromedioPedidos(response.Datos.PromedioPedidos);
                setTopAbandonados(response.Datos.TopAbandonados);
                setTopMasVendidos(response.Datos.TopMasVendidos);

                if (response.Datos.TopMasVendidos !== null && response.Datos.TopMasVendidos.length > 0) {
                    setArticuloSeleccionado(response.Datos.TopMasVendidos[0]);
                }

            }
            else {

                if (response.Codigo_Error === 16) {
                    window.location.href = baseUrl + 'Error?Mensaje=La conexión no es válida';
                } else {
                    Notificacion.error(`Error ${response.Mensaje}`);
                }

            }

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

    }

    const responsive = {
        superLargeDesktop: {

            breakpoint: { max: 4000, min: 3000 },
            items: 8
        },
        desktop: {
            breakpoint: { max: 3000, min: 1024 },
            items: 6
        },
        tablet: {
            breakpoint: { max: 1024, min: 464 },
            items: 5
        },
        mobile: {
            breakpoint: { max: 464, min: 0 },
            items: 3
        }
    };

    const onClick = (id) => {

        if (id !== null) {
            const filtro = TopMasVendidos.filter(x => x.Articulo_Id === id);
            if (filtro.length > 0)
                setArticuloSeleccionado(filtro[0]);
        }

    }

    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 } })

        LocalStorage.set('Desde', _Datos.Desde.value);
        LocalStorage.set('Hasta', _Datos.Hasta.value);

        await cargarDatos(_Datos);

        _Datos.Desde.attributes.maxDate = moment(_Datos.Hasta.value).toDate();
        _Datos.Hasta.attributes.minDate = moment(_Datos.Desde.value).toDate();
        _Datos.Hasta.attributes.maxDate = moment().toDate();

        setDatos(_Datos);

    }

    return (
        <Fragment>
            <OrdenesInt
                Datos={Datos}
                responsive={responsive}
                TotalOrdenes={TotalOrdenes}
                CarritosAbandonados={CarritosAbandonados}
                PromedioAbandono={PromedioAbandono}
                PromedioDiario={PromedioDiario}
                PromedioIngresos={PromedioIngresos}
                PromedioPedidos={PromedioPedidos}
                TopAbandonados={TopAbandonados}
                TopMasVendidos={TopMasVendidos}
                ArticuloSeleccionado={ArticuloSeleccionado}
                onClick={onClick}
                onhandleChangeDate={onhandleChangeDate}
            />
            <ModalSpinner
                selectedModal={mostrarSpinnerModal.mostrar}
                contentLabel={'spinnerModalProgress'}
                label={mostrarSpinnerModal.label}
                tipoSpinner={mostrarSpinnerModal.tipo}
            />
        </Fragment>
    );
}

export default Ordenes;