import React, {Component} from 'react';
import Chart from 'chart.js';
import $ from 'jquery';
import * as api from "../../api/api";

class DeliveryRateChartComponent extends Component {

    constructor(){
        super()

        this.state = {
            data: 'test'
        }
        this.setChartData=this.setChartData.bind(this)
    }

    componentDidMount(){
        api.dashboardsPerformance()
            .then(res => {
                //console.log({dashboardsPerformance: res.data})
                this.setState({data: res.data.results}, ()=>{
                    this.setChartData()
                })
            })
            .catch(error => {
                console.log({dashboardsPerformance: error})
            })
    }

    setChartData(){
        $('#deliveryRateChartLoading').show()
        var array = this.state.data
        var arrayDates = new Set()
        var arrayStatuses = new Set()

        for (var i = 0; i < array.length; i++) {
            arrayDates.add(array[i]._id.dayMonthYear.$date)
            arrayStatuses.add(array[i]._id.trackingStatus)
        }

        var uniqueArrayOfDates = Array.from(arrayDates)
        var arrayForOneDay = []
        var arrayForAllDays = []
        for (var i = 0; i < uniqueArrayOfDates.length; i++) {
            for (var t = 0; t < array.length; t++) {
                if (uniqueArrayOfDates[i] === array[t]._id.dayMonthYear.$date) {
                    arrayForOneDay.push(array[t])
                }
            }
            arrayForAllDays.push(arrayForOneDay)
            arrayForOneDay = []
        }

        var mapResult = new Map()
        var uniqueArrayOfStatuses = Array.from(arrayStatuses)
        for (var i = 0; i < uniqueArrayOfStatuses.length; i++) {
            mapResult.set(uniqueArrayOfStatuses[i], [])
        }
        var count = 0
        var deliveryRateArray = []
        var numOne = 1
        var numTwo = 1
        for (var i = 0; i < arrayForAllDays.length; i++) {
            //work with one day there

            for (var j = 0; j < uniqueArrayOfStatuses.length; j++) {
                var boolean = false
                for (var k = 0; k < arrayForAllDays[i].length; k++) {
                    if(uniqueArrayOfStatuses[j] === arrayForAllDays[i][k]._id.trackingStatus) {
                        boolean = true
                        count = arrayForAllDays[i][k].total
                    }
                }
                if (boolean) {
                    mapResult.get(uniqueArrayOfStatuses[j]).push(count);
                } else {
                    mapResult.get(uniqueArrayOfStatuses[j]).push(0)
                }

                if (boolean && uniqueArrayOfStatuses[j] === "EXEPTION" || uniqueArrayOfStatuses[j] === "IN_TRANSIT") {
                    numOne += count
                } else if (boolean && uniqueArrayOfStatuses[j] === "DELIVERED") {
                    numTwo = count
                }


            }

            deliveryRateArray.push(numTwo / (numOne));
            numOne = 1
            numTwo = 1
        }

        console.log(deliveryRateArray)



        console.log(mapResult)
        console.log(arrayForAllDays)


        let dataAsString = []
        for (let  i = 0; i < uniqueArrayOfDates.length; i++){
            if (i % 5 == 0){
                let date = new Date(uniqueArrayOfDates[i])
                dataAsString.push(date.getDate() + '/' + date.getMonth() + "/" + date.getFullYear())
            } else {
                dataAsString.push('')
            }

        }


        setTimeout(function () {
            var ctx = document.getElementById('deliveryRateChart');
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: dataAsString.slice(dataAsString.length - 30, dataAsString.length),//uniqueArrayOfDates.slice(uniqueArrayOfDates.length - 30, uniqueArrayOfDates.length),
                    datasets: [
                        {
                            label: 'Delivery Rate',
                            data: deliveryRateArray.slice(deliveryRateArray.length - 40, deliveryRateArray.length - 10),
                            yAxisID: 'y-axis-1',
                            fill: false,
                            type: 'line',
                            borderColor: '#239B56',
                            backgroundColor: '#239B56',
                        },
                        {
                            label: 'Unfulfilled',
                            data: mapResult.get("EXCEPTION").slice(mapResult.get("EXCEPTION").length - 40, mapResult.get("EXCEPTION").length -10),
                            backgroundColor: 'black'
                        },
                        {
                            label: 'In Transit',
                            data: mapResult.get("IN_TRANSIT").slice(mapResult.get("IN_TRANSIT").length - 40, mapResult.get("IN_TRANSIT").length - 10),
                            backgroundColor: '#76D7C4'
                        },
                        {
                            label: 'Delivered',
                            data: mapResult.get("DELIVERED").slice(mapResult.get("DELIVERED").length - 40, mapResult.get("DELIVERED").length - 10),
                            backgroundColor: '#21618C'
                        },
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        xAxes: [{ stacked: true }],
                        yAxes: [{ stacked: true },
                            {
                                id: 'y-axis-1',
                                position: 'right',
                                ticks: {
                                    beginAtZero: true,
                                    callback: function(value, index, values) {
                                        return value + '%';
                                    }
                                }
                            }]
                    }
                }
            });
            $('#deliveryRateChartLoading').hide()
            $('#deliveryRateChart').show()
        }, 1000)
    }

    render(){
        return (
            <div>
                <div>
                    <canvas id="deliveryRateChart" style={{height: '100%'}}/>
                </div>
                <div id="deliveryRateChartLoading" className={"text-center"}>
                    <div className="spinner-border text-primary" role="status">
                        <span className="sr-only">Loading...</span>
                    </div>
                </div>
            </div>
        );
    }
}

export default DeliveryRateChartComponent