import React, { useEffect, useState, useContext, Fragment } from 'react';

import { ClientesRequest } from '../../components/Requests/index.jsx';
import LocalStorage from '../../components/LocalStorage/index.jsx';
import { baseUrl } from '../../config.jsx';
import { baseRelUrl } from '../../request/PathConfig.js';

import ClienteInt from './clienteInt.jsx';
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 Cliente = (props) => {

    const [TotalClientes, setTotalClientes] = useState(0);
    const [TotalClientesActivos, setTotalClientesActivos] = useState(0);
    const [TotalClientesNuevos, setTotalClientesNuevos] = useState(0);
    const [ReclamacionesContactos, setReclamacionesContactos] = useState(0);
    const [ReclamacionesReclamos, setReclamacionesReclamos] = useState(0);
    const [OrdenesNDias, setOrdenesNDias] = useState([]);
    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(), minDate: moment().toDate(), maxDate: moment().toDate(), }, },
        NDias: { value: 0 },
    };
    const [Datos, setDatos] = useState(pDatos);
    const [DatosGrafico, setDatosGrafico] = useState([]);
    const [Fechas, setFechas] = useState([]);
    const [mostrarSpinnerModal, setMostrarSpinnerModal] = useState({ mostrar: false, label: '', tipo: 3 });
    const { Usuario, setUsuario } = useContext(UsuarioContext);
    const { Sucursales, setSucursales } = useContext(SucursalesContext);
    const { Sucursal, setSucursal } = useContext(SucursalContext);

    useEffect(() => {
        VerificaParametros();
        VerificaMenuActivo();
    }, [])

    useEffect(() => {

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

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

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

        }

        carga();

    }, [Sucursal]);

    const VerificaMenuActivo = () => {

        let current = location.pathname;

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

        if (current === baseRelUrl || current + "/" === baseRelUrl) {

            for (let i = 0, len = navItems.length; i < len; i++) {
                if (navItems[i].childNodes.length > 0 && navItems[i].childNodes[0].getAttribute("href") !== null) {

                    navItems[i].className = navItems[i].className.replace("active", "")

                }
            }

            navItems[0].className += " active";

        } else {

            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 params = new URLSearchParams(window.location.search)

        const token = params.get('token');
        const emp_id = params.get('emp_id');
        const id = params.get('id');

        if (params.get('token') !== null) {

            LocalStorage.set('token', token);
            LocalStorage.set('emp_id', emp_id);
            LocalStorage.set('id', id);

        } else {

            if (LocalStorage.get('token') === null || LocalStorage.get('emp_id') === null || LocalStorage.get('id') === null) {
                window.location.href = baseUrl + 'Error?Mensaje=La conexión no es válida';
            }

        }
    }

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

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

    }

    const cargarDatos = async (_Datos) => {

        try {

            spinnerModalMostrar(true, '', 3);

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

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

            const response = await ClientesRequest.ObtenerDatosClientes(
                LocalStorage.get('token'),
                LocalStorage.get('emp_id'),
                LocalStorage.get('suc_id') ?? 0,
                moment(Desde).format('YYYY/MM/DD'),
                moment(Hasta).format('YYYY/MM/DD'),
                LocalStorage.get('id'));

            if (response.Exitoso) {

                setTotalClientes(response.Datos.TotalClientes);
                setTotalClientesActivos(response.Datos.TotalClientesActivos);
                setTotalClientesNuevos(response.Datos.TotalClientesNuevos);
                setReclamacionesContactos(response.Datos.TotalContactos);
                setReclamacionesReclamos(response.Datos.TotalReclamos);
                setOrdenesNDias(response.Datos.OrdenesUltimosNDias);

                setUsuario(response.Datos.Usuario);
                setSucursales(response.Datos.Sucursales);
                LocalStorage.set('suc_lista', JSON.stringify(response.Datos.Sucursales));
                LocalStorage.set('usuario', JSON.stringify(response.Datos.Usuario));

                if (Sucursal === null || Sucursal === 0 && response.Datos.Sucursales.length > 0) {
                    setSucursal(response.Datos.Sucursales[0]);
                    LocalStorage.set('suc_id', response.Datos.Sucursales[0].Id);
                }

                let datosGrafico = [];
                let fechasGrafico = [];

                response.Datos.OrdenesUltimosNDias.map((x) => {
                    datosGrafico.push(x.Ventas);
                    fechasGrafico.push(moment(x.Fecha).format('DD/MM/YYYY'));
                });

                setDatosGrafico(datosGrafico);
                setFechas(fechasGrafico);

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

    }

    const opciones = {
        chart: { type: 'spline' },
        title: { text: `Órdenes de los últimos ${Datos.NDias.value} días` },
        subtitle: { text: '' },
        xAxis: {
            categories: Fechas
        },
        yAxis: {
            title: { text: 'Ventas' },
            labels: { formatter: function () { return this.value + ''; } }
        },
        tooltip: { crosshairs: true, shared: true },
        plotOptions: {
            spline: {
                marker: {
                    radius: 4,
                    lineColor: '#666666',
                    lineWidth: 1
                }
            }
        },
        series: [{
            name: 'Órdenes',
            marker: { symbol: 'diamond' },
            data: DatosGrafico
        }]
    };

    return (
        <Fragment>
            <ClienteInt
                opciones={opciones}
                TotalClientes={TotalClientes}
                TotalClientesActivos={TotalClientesActivos}
                TotalClientesNuevos={TotalClientesNuevos}
                ReclamacionesContactos={ReclamacionesContactos}
                ReclamacionesReclamos={ReclamacionesReclamos}
                OrdenesNDias={OrdenesNDias}
                Datos={Datos}
                onhandleChangeDate={onhandleChangeDate}
            />
            <ModalSpinner
                selectedModal={mostrarSpinnerModal.mostrar}
                contentLabel={'spinnerModalProgress'}
                label={mostrarSpinnerModal.label}
                tipoSpinner={mostrarSpinnerModal.tipo}
            />
        </Fragment>
    )

};
export default Cliente;