var servicesURL = {
    getAllCasesGroupByContinent : 'https://83.212.77.22:9443/services/get_all_cases_group_by_continent.php',
    getContinents: 'https://83.212.77.22:9443/services/get_continents.php',
    getGroupByChooseContinent: 'https://83.212.77.22:9443/services/get_group_by_choose_continent_data.php',
    getCountries: 'https://83.212.77.22:9443/services/get_countries.php',
    getCountryDataInSpecificDates: 'https://83.212.77.22:9443/services/get_country_data_specific_dates.php',
    getLastDate: 'https://83.212.77.22:9443/services/get_last_date.php',
    getContinentsDataInSpecificDates: 'https://83.212.77.22:9443/services/get_continent_data_specific_dates.php',
    getTotalCasesAndDeaths: 'https://83.212.77.22:9443/services/get_total_cases_deaths.php'
}

var WebCall = {
    charts: [],
    renderCasesGroupByContinent: function(elementID){
        $.get(servicesURL.getAllCasesGroupByContinent).done(function(data){
            let options={
                series: [],
                chart: {
                    width: 600,
                    type: 'pie'
                },
                labels: [],
                responsive: [{
                    breakpoint: 800,
                    options: {
                        chart: {
                            width: 300
                        },
                        legend: {
                            position: 'bottom'
                        }
                    }
                }]
            };

            data.forEach(function(element){
                options.series.push(parseInt(element.Cases,10));
                options.labels.push(element.continentExp);
            });

            WebCall.renderChart(elementID, options);
        });
    },
    initalizeContinentsSelector: function(selectorID){
        $.get(servicesURL.getContinents).done(function (data) {
            let selector = $(selectorID);
            selector.append($("<option>").attr("value", "none").attr("selected", "selected").text("Choose One"));
            data.forEach(function (element) {
                selector.append($("<option>").attr("value", element.continentExp).text(element.continentExp));
            });
        });
    },
    renderAllCountryCasesDeathsByContinent: function (elementCasesID, elementDeathsID, continentValue, event) {
        $.post(servicesURL.getGroupByChooseContinent, { continent: continentValue, order: 1}).done(function (data) {
            let casesOptions = {
                series: [{
                    data: []
                }],
                chart: {
                    type: 'bar',
                    // height: height,
                    width: "100%"
                },
                plotOptions: {
                    bar: {
                        horizontal: true,
                    }
                },
                dataLabels: {
                    // enabled: false
                    enabled: true
                },
                xaxis: {
                    categories: [],
                },
                tooltip: {
                    theme: 'dark',
                    x: {
                        show: true
                    },
                    y: {
                        title: {
                            formatter: function () {
                                return 'Cases'
                            }
                        }
                    }
                }
            };

            casesOptions.chart.height = data.length * 40;
            data.forEach(function (element) {
                casesOptions.series[0].data.push(parseInt(element.Cases, 10));
                casesOptions.xaxis.categories.push(element.countriesAndTerritories);
            });
            WebCall.renderChart(elementCasesID, casesOptions);
        });

        $.post(servicesURL.getGroupByChooseContinent, { continent: continentValue, order: 2 }).done(function (data) {
            let deathsOptions = {
                series: [{
                    data: []
                }],
                chart: {
                    type: 'bar',
                    width: "100%"
                },
                plotOptions: {
                    bar: {
                        horizontal: true,
                    }
                },
                dataLabels: {
                    enabled: true
                },
                xaxis: {
                    categories: [],
                },
                tooltip: {
                    theme: 'dark',
                    x: {
                        show: true
                    },
                    y: {
                        title: {
                            formatter: function () {
                                return 'Deaths'
                            }
                        }
                    }
                }
            };

            deathsOptions.chart.height = data.length * 40;
            data.forEach(function (element) {
                deathsOptions.series[0].data.push(parseInt(element.Deaths, 10));
                deathsOptions.xaxis.categories.push(element.countriesAndTerritories);
            });
            WebCall.renderChart(elementDeathsID, deathsOptions);

        });
    },

    renderChart: function(elementID, options){
        let chart = WebCall.findChart(elementID);
        if (chart){
            const index = WebCall.charts.indexOf(chart);
            chart.chartObj.destroy();
            if (index > -1) {
                WebCall.charts.splice(index, 1);
                console.log('Remove Chart');
                console.log('Length = ' + WebCall.charts.length);
            }
            else{
                console.log('Not found Chart');
                console.log('Length = ' + WebCall.charts.length);
            }
            try{
                chart = new ApexCharts(document.querySelector(elementID), options);
                chart.render();
                WebCall.charts.push(new Chart(chart, elementID));
            }
            catch(error){
                console.log(error);
            }
        }
        else{
            try{
                chart = new ApexCharts(document.querySelector(elementID), options);
                chart.render();
                WebCall.charts.push(new Chart(chart, elementID));
            }
            catch (error) {
                console.log(error);
            }
        }
    },
    updateChart:function(elementID, options){

    },
    findChart(chartID){
        return WebCall.charts.find(function(chart, index){
            return chart.chartID === chartID;
        });
    },
    initalizeCountriesSelector: function (selectorID) {
        $.get(servicesURL.getCountries).done(function (data) {
            let selector = $(selectorID);
            selector.append($("<option>").attr("value", "none").attr("selected", "selected").text("Choose One"));
            data.forEach(function (element) {
                selector.append($("<option>").attr("value", element.countriesAndTerritories).text(element.countriesAndTerritories));
            });
            
            $(selectorID).select2();

        });

        return $(selectorID);
    },
    renderCasesByCountryAndDate: function (elementID, countryVar, dates) {
        if (countryVar === "" || countryVar === 'undefined' || countryVar === null || countryVar === 'none'
            || dates === "" || dates === 'undefined' || dates === null)
        {
            console.log('No data provided...');
            return;
        }
        let dateArray = dates.split('-');
        if(dateArray.length < 2){
            console.log('No data provided...');
            return;
        }
        let trimedArray = getTrimedStringArray(dateArray);

        // console.log(countryVar);
        // console.log(trimedArray[0]);
        // console.log(trimedArray[1]);
        $.post(servicesURL.getCountryDataInSpecificDates, { from_date: trimedArray[0], until_date: trimedArray[1], country: countryVar}).done(function (data) {
            // console.log(data);
            // let dates=[];
            // for(i=0; i<10; i++){
            //     dates.push('2018-02-12');
            // }
            var options = {
                chart: {
                    type: "area",
                    height: 600,
                    width: "100%",
                    foreColor: "#999",
                    stacked: true,
                    dropShadow: {
                        enabled: true,
                        enabledSeries: [0],
                        top: -2,
                        left: 2,
                        blur: 5,
                        opacity: 0.06
                    }
                },
                colors: ['#00E396', '#0090FF'],
                stroke: {
                    curve: "smooth",
                    width: 3
                },
                dataLabels: {
                    enabled: false
                },
                series: [{
                    name: 'Total Deaths',
                    data: []
                    // data: generateDayWiseTimeSeries(0, 18)
                },
                {
                    name: 'Total Cases',
                    data: []
                        // data: generateDayWiseTimeSeries(0, 18)
                }],
                markers: {
                    size: 0,
                    strokeColor: "#fff",
                    strokeWidth: 3,
                    strokeOpacity: 1,
                    fillOpacity: 1,
                    hover: {
                        size: 6
                    }
                },
                xaxis: {
                    type: "datetime",
                    axisBorder: {
                        show: false
                    },
                    axisTicks: {
                        show: false
                    }
                },
                yaxis: {
                    labels: {
                        offsetX: 14,
                        offsetY: -5
                    },
                    tooltip: {
                        enabled: true
                    }
                },
                grid: {
                    padding: {
                        left: -5,
                        right: 5
                    }
                },
                tooltip: {
                    x: {
                        format: "dd MMM yyyy"
                    },
                },
                legend: {
                    position: 'top',
                    horizontalAlign: 'left'
                },
                fill: {
                    type: "solid",
                    fillOpacity: 0.7
                }
            };

            data.forEach(function (element) {
                options.series[0].data.push([new Date(element.dateRep).getTime(), element.deaths]);
                options.series[1].data.push([new Date(element.dateRep).getTime(), element.cases]);
            });

            WebCall.renderChart(elementID, options);
        });
    },
    renderLastDate(elementID){
        $.get(servicesURL.getLastDate).done(function (data) {
            let element = $(elementID);
            element.html(data);
        });
    },
    renderCasesByContinentAndDate: function (elementID, continentVar, dates) {
        if (continentVar === "" || continentVar === 'undefined' || continentVar === null || continentVar === 'none'
            || dates === "" || dates === 'undefined' || dates === null) {
            console.log('No data provided...');
            return;
        }
        let dateArray = dates.split('-');
        if (dateArray.length < 2) {
            console.log('No data provided...');
            return;
        }
        let trimedArray = getTrimedStringArray(dateArray);


        $.post(servicesURL.getContinentsDataInSpecificDates, { from_date: trimedArray[0], until_date: trimedArray[1], continent: continentVar }).done(function (data) {
            console.log(data);

            var options = {
                chart: {
                    type: "area",
                    height: 600,
                    width: "100%",
                    foreColor: "#999",
                    stacked: true,
                    dropShadow: {
                        enabled: true,
                        enabledSeries: [0],
                        top: -2,
                        left: 2,
                        blur: 5,
                        opacity: 0.06
                    }
                },
                colors: ['#00E396', '#0090FF'],
                stroke: {
                    curve: "smooth",
                    width: 3
                },
                dataLabels: {
                    enabled: false
                },
                series: [{
                    name: 'Total Deaths',
                    data: []
                    // data: generateDayWiseTimeSeries(0, 18)
                },
                {
                    name: 'Total Cases',
                    data: []
                    // data: generateDayWiseTimeSeries(0, 18)
                }],
                markers: {
                    size: 0,
                    strokeColor: "#fff",
                    strokeWidth: 3,
                    strokeOpacity: 1,
                    fillOpacity: 1,
                    hover: {
                        size: 6
                    }
                },
                xaxis: {
                    type: "datetime",
                    axisBorder: {
                        show: false
                    },
                    axisTicks: {
                        show: false
                    }
                },
                yaxis: {
                    labels: {
                        offsetX: 14,
                        offsetY: -5
                    },
                    tooltip: {
                        enabled: true
                    }
                },
                grid: {
                    padding: {
                        left: -5,
                        right: 5
                    }
                },
                tooltip: {
                    x: {
                        format: "dd MMM yyyy"
                    },
                },
                legend: {
                    position: 'top',
                    horizontalAlign: 'left'
                },
                fill: {
                    type: "solid",
                    fillOpacity: 0.7
                }
            };

            data.forEach(function (element) {
                options.series[0].data.push([new Date(element.dateRep).getTime(), element.Deaths]);
                options.series[1].data.push([new Date(element.dateRep).getTime(), element.Cases]);
            });

            WebCall.renderChart(elementID, options);
        });
    },
    renderTotalCasesAndDeaths(casesID, deathsID) {
        $.get(servicesURL.getTotalCasesAndDeaths).done(function (data) {
            let totalCases = $(casesID);
            totalCases.html(data[0].Cases);
            
            let totalDeaths = $(deathsID);
            totalDeaths.html(data[0].Deaths);
        });
    }
}