import React from 'react';
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'
import { ServiceRequest } from '../../components/Requests/service';
import LocalStorage from '../../components/LocalStorage';

class Cliente extends React.Component {
    constructor() {
        super();        
        this.state = {
            TotalClientes: 0,
            TotalClientesActivos: 0,
            TotalClientesNuevos: 0,
            ReclamacionesContactos: 0,
            ReclamacionesReclamos: 0,
            OrdenesNDias: []

        }
    }


    componentDidMount = async () => {
        console.log('localStorage.getItem ', localStorage.getItem('token'))
        if (localStorage.getItem('token') != '') {
            await this.CargarTotalCliente();

                await this.CargarTotalClienteActivo();
                await this.CargarTotalClienteNuevo();
                await this.CargarTotalClienteReclamos();
                await this.CargarTotalClienteContactos();
                await this.CargarTotalVentasXDia();


        }

    }

    CargarTotalCliente = async () => {
        const localstorage = new LocalStorage();
        const response = await ServiceRequest.TotalClientes(localstorage.get('token'));

        if (response.isError == false) {
            this.setState({ TotalClientes: response.data.Datos })
            this.ConexionValida = true;
        } else {
            this.ConexionValida = false;
        }

    }

    CargarTotalClienteActivo = async () => {
        const localstorage = new LocalStorage();
        const response = await ServiceRequest.TotalClientesActivo(localstorage.get('emp_id'), localstorage.get('suc_id'));


        if (response.isError == false) {
            this.setState({ TotalClientesActivos: response.data.Datos })
            this.ConexionValida = true;
        } else {
            this.ConexionValida = false;
        }

    }

    CargarTotalClienteNuevo = async () => {
        const localstorage = new LocalStorage();
        const response = await ServiceRequest.Socio_Frecuente_Total_Nuevos(localstorage.get('token'));


        if (response.isError == false) {
            this.setState({ TotalClientesNuevos: response.data.Datos })
            this.ConexionValida = true;
        } else {
            this.ConexionValida = false;
        }

    }

    CargarTotalClienteReclamos = async () => {
        const localstorage = new LocalStorage();

        const response = await ServiceRequest.Total_Contactos_Reclamos(localstorage.get('emp_id'), localstorage.get('suc_id'), 2);


        if (response.isError == false) {
            this.setState({ ReclamacionesReclamos: response.data.Datos })
            this.ConexionValida = true;
        } else {
            this.ConexionValida = false;
        }

    }

    CargarTotalClienteContactos = async () => {
        const localstorage = new LocalStorage();

        const response = await ServiceRequest.Total_Contactos_Reclamos(localstorage.get('emp_id'), localstorage.get('suc_id'), 1);


        if (response.isError == false) {
            this.setState({ ReclamacionesContactos: response.data.Datos })
            this.ConexionValida = true;
        } else {
            this.ConexionValida = false;
        }

    }

    CargarTotalVentasXDia = async () => {
        const localstorage = new LocalStorage();

        const response = await ServiceRequest.Total_Ventas_Por_Dias(localstorage.get('emp_id'), localstorage.get('suc_id'), 1);


        if (response.isError == false) {
            let listaVentas = response.data.Datos;

            if (listaVentas !=null && listaVentas.length > 0) {

                let ListaPivote = listaVentas.map((element, index) => {
                    console.log(index)
                    return { x: new Date(element.Fecha), y: element.Ventas  }
                })

                this.setState({ OrdenesNDias: ListaPivote })
                this.ConexionValida = true;
                return;
            }
            this.ConexionValida = false;
        } else {
            this.ConexionValida = false;
        }

    }


    render() {


        const options = {
            chart: {
                type: 'line'
            },
            credits: {
                enabled: false
            },
            title: {
                text: 'Órdenes de los Últimos 30 días'
            },
            subtitle: {
                text: null
            },
            xAxis: {
                type: 'datetime',
                labels: {
                    rotation: 45,
                    align: 'left',
                    format: '{value:%e/%b/%Y}'
                }
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' +
                        Highcharts.dateFormat('%e - %b - %Y',
                            this.x) +
                        ' , ' + this.y + ' Órdenes.';
                }
            },
            plotOptions: {
                line: {
                    marker: {
                        enabled: true
                    }
                }
            },
            series: [{
                name: 'Órdenes',
                data: this.state.OrdenesNDias
            },]
        };




        return (
            <React.Fragment>
                <div className="main">
                    <div className="container">
                        <div className="back2">
                            <div className="row">
                                <div className="col-lg-4 col-md-12">
                                    <div className="back3">
                                        <h3 className="marginx">Total de Clientes</h3>
                                        <p className="variable">{this.state.TotalClientes}</p>
                                    </div>
                                </div>
                                <div className="col-lg-4 col-md-12">
                                    <div className="back3">
                                        <h3>Total de Clientes Activos</h3>
                                        <p className="tiempo">Últimos 30 días</p>
                                        <p className="variable">{this.state.TotalClientesActivos}</p>
                                    </div>
                                </div>
                                <div className="col-lg-4 col-md-12">
                                    <div className="back3">
                                        <h3>Total de Clientes Nuevos</h3>
                                        <p className="tiempo">Últimos 30 días</p>
                                        <p className="variable">{this.state.TotalClientesNuevos}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="row">
                            <div className="col-lg-4 col-md-12">
                                <div className="back2">
                                    <h2 className="mt-2">Contáctenos / Reclamaciones</h2>
                                    <div className="row">
                                        <div className="col">
                                            <div className="back3">
                                                <h3>Cantidad de Contactos</h3>
                                                <p className="tiempo">Últimos 30 días</p>
                                                <p className="variable">{this.state.ReclamacionesReclamos}</p>
                                            </div>
                                            <div className="back3">
                                                <h3>Total de Reclamos</h3>
                                                <p className="tiempo">Últimos 30 días</p>
                                                <p className="variable">{this.state.ReclamacionesContactos}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="col-lg-8 col-md-12">
                                <div className="back3-highchart">
                                    {this.state.OrdenesNDias.length > 0 && <HighchartsReact
                                        highcharts={Highcharts}
                                        options={options}
                                    />}

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </React.Fragment>
        )
    }
};
export default Cliente;