import React, { useState, useEffect, Fragment, useContext } from "react";
import ArticulosInt from "./ArticulosInt.jsx";
import { ArticulosRequest } from "../../components/Requests/index.jsx";
import LocalStorage from "../../components/LocalStorage/index.jsx";

import moment from "moment";
import { Notificacion } from "../../components/Common/Notification/index.jsx";
import ModalSpinner from '../../components/modalSpinner/modalSpinner.jsx';
import { baseUrl } from "../../config.jsx";
import { baseRelUrl } from '../../request/PathConfig.js';
import { SucursalContext, UsuarioContext, SucursalesContext } from '../../Context.jsx';

import Highcharts from 'highcharts';

const Articulos = () => {
    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 [ArticulosActivos, setArticulosActivos] = useState(0);
    const [ArticulosComprados, setArticulosComprados] = useState(0);
    const [ArticulosCalificados, setArticulosCalificados] = useState(0);
    const [PromedioDiario, setPromedioDiario] = useState(0);
    const [PromedioCalificacion, setPromedioCalificacion] = useState(0);
    const [ArticulosMejorCalificados, setArticulosMejorCalificados] = useState([]);
    const [ArticulosPeorCalificados, setArticulosPeorCalificados] = useState([]);
    const [ArticuloSeleccionado, setArticuloSeleccionado] = useState(null);
    const [DatosGrafico, setDatosGrafico] = useState([]);
    const [ComentariosArticulo, setComentariosArticulo] = useState([]);
    const [Pedidos, setPedidos] = useState(0);
    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;

    const highChartsRender = (datosGrafico) => {

        Highcharts.chart({
            chart: {
                type: 'pie',
                renderTo: 'divGrafico'
            },
            title: {
                verticalAlign: 'middle',
                floating: true,
                text: '',
                style: {
                    fontSize: '10px',
                }
            },
            tooltip: {
                headerFormat: '',
                pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name} {point.percentage:.1f} %</b><br/>'
            },
            plotOptions: {
                pie: {
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b> {point.percentage:.1f} %',
                    },
                    innerSize: '10%'
                }
            },
            series: [{ name: 'IngresosvsPedidos', data: datosGrafico }]
        });
    }

    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 = () => {

        let 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 ArticulosRequest.ObtenerDatosArticulos(
                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) {
                setArticulosActivos(response.Datos.ArticulosActivos);
                setArticulosComprados(response.Datos.ArticulosComprados);
                setArticulosCalificados(response.Datos.ArticulosCalificados);
                setPromedioDiario(parseFloat(response.Datos.PromedioDiario).toFixed(2));
                setPromedioCalificacion(response.Datos.PromedioCalificacion);
                setArticulosMejorCalificados(response.Datos.ArticulosMejorCalificados);
                setArticulosPeorCalificados(response.Datos.ArticulosPeorCalificados);

                if (
                    response.Datos.ArticulosMejorCalificados !== null &&
                    response.Datos.ArticulosMejorCalificados.length > 0
                ) {
                    let Seleccionado = response.Datos.ArticulosMejorCalificados[0];
                    setArticuloSeleccionado(Seleccionado);

                    const responsePorArticulo = await ArticulosRequest.Obtener_Calificacion_Pedidos_Por_Articulo(LocalStorage.get("token"), LocalStorage.get("emp_id"), LocalStorage.get("suc_id"), TopN, Seleccionado.Articulo_Id);

                    if (responsePorArticulo.Exitoso) {

                        setPedidos(responsePorArticulo.Datos.ArticulosComprados);
                        setComentariosArticulo(responsePorArticulo.Datos.CalificacionesPorArticulo);

                    } else {
                        Notificacion.error(`Error ${responsePorArticulo.Mensaje}`);
                    }

                }

                highChartsRender([
                    { name: 'Comprados', y: response.Datos.ArticulosComprados },
                    { name: 'No Comprados', y: response.Datos.ArticulosActivos },
                ]);

            } 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 onClick = async (id) => {

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

                const response = await ArticulosRequest.Obtener_Calificacion_Pedidos_Por_Articulo(LocalStorage.get("token"), LocalStorage.get("emp_id"), LocalStorage.get("suc_id"), TopN, id);

                if (response.Exitoso) {

                    setPedidos(response.Datos.ArticulosComprados);
                    setComentariosArticulo(response.Datos.CalificacionesPorArticulo);

                } else {
                    Notificacion.error(`Error ${response.Mensaje}`);
                }

            }
        }

    }

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

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

        await cargarDatos(_Datos);

        setDatos(_Datos);

    }

    return (
        <Fragment>
            <ArticulosInt
                Datos={Datos}
                DatosGrafico={DatosGrafico}
                ArticulosActivos={ArticulosActivos}
                ArticulosComprados={ArticulosComprados}
                ArticulosCalificados={ArticulosCalificados}
                PromedioDiario={PromedioDiario}
                PromedioCalificacion={PromedioCalificacion}
                ArticulosMejorCalificados={ArticulosMejorCalificados}
                ArticulosPeorCalificados={ArticulosPeorCalificados}
                TopN={TopN}
                ArticuloSeleccionado={ArticuloSeleccionado}
                ComentariosArticulo={ComentariosArticulo}
                onClick={onClick}
                responsive={responsive}
                onhandleChangeDate={onhandleChangeDate}
            />
            <ModalSpinner
                selectedModal={mostrarSpinnerModal.mostrar}
                contentLabel={'spinnerModalProgress'}
                label={mostrarSpinnerModal.label}
                tipoSpinner={mostrarSpinnerModal.tipo}
            />
        </Fragment>
    );
};
export default Articulos;