import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { ChartConfiguration, ChartData } from 'chart.js';

import { ServiceComm } from '../../services/service-comm.service';
import { TunnelFlightService } from "../../services/tunnel-flight.service";

@Component({
    selector: 'app-list-of-tunnel-flights',
    templateUrl: './list-of-tunnel-flights.component.html',
    styleUrls: ['./list-of-tunnel-flights.component.css']
})
export class ListOfTunnelFlightsComponent implements OnInit {
    public barChartLegend = true;
    public barChartPlugins = [];
    public barChartData: ChartData<'bar'>;
    public barChartOptions: ChartConfiguration['options'];
    public barChartType: string;
    public isLoading: boolean = false;
    public selectedPeriod: string;

    constructor(private serviceComm: ServiceComm,
                private serviceTunnelFlight: TunnelFlightService,
                private translateService: TranslateService) { }

    ngOnInit() {
        this.serviceComm.forceTranslateTitle.subscribe((data) => {
            if (data === true) {
                this.updateTitle();
            }
        });
        this.updateTitle();

        this.isLoading = true;
        this.selectedPeriod = "currentYear"
        this.getData();
    }

    private updateTitle() {
        this.translateService.get("ListTunnelFlight_Title").subscribe(
            data => { this.serviceComm.updatedComponentTitle(data); }
        );
    }

    private getData(): void {
        this.barChartType = "bar";
        this.barChartData = {
            labels: ['2006', '2007', '2008', '2009', '2010', '2011', '2012'],
            datasets: [
                { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
                { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }
            ]
        };

        this.barChartOptions = {
            responsive: false,
            plugins: {
                legend: {
                    display: true
                },
                tooltip: {
                    callbacks: {
                        footer: this.footer,
                    }
                }
            },
            interaction: {
                intersect: false,
                mode: 'nearest',
                axis: 'x'
            },
            scales: {
                x: {
                    stacked: true
                },
                y: {
                    stacked: true
                }
            }
        };

        this.isLoading = false;
    }

    private footer = (tooltipItems) => {
        let sum = 0;

        tooltipItems.forEach(function (tooltipItem) {
            sum += tooltipItem.parsed.y;
        });
        return 'Sum: ' + sum;
    };

    public onPeriodChange() {
        console.log(this.selectedPeriod);
    }
}