import {Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges, ViewChild} from '@angular/core';
import {War} from '../../../models/model-interfaces';
import {TranslateService} from '@ngx-translate/core';
import {ChartUtils} from '../../../utils/chart-utils';


@Component({
  selector: 'cc-server-statistics',
  templateUrl: './server-stats.component.html',
  styleUrls: ['./server-stats.component.scss']
})
export class ServerStatsComponent implements OnInit, OnChanges {

  @ViewChild('overview') private overviewContainer: ElementRef;

  @Input() war: War;

  @Input() performanceData: any;

  startDateObj: Date;

  public activeChartSelect: string;

  showBarChart = true;
  barChartData: any[] = [];
  lineChartData: any[] = [];

  tmpSingleAvg;
  tmpSingleMin;
  tmpAvgTimeline;
  tmpMinTimeline;
  tmpServerTimeline;

  barChartLabel: string;
  lineChartLabel: string;
  readonly labels = {
    singleAvg: 'stats.performance.select.single.avg',
    singleMin: 'stats.performance.select.single.min',
    avgTimeline: 'stats.performance.select.timeline.avg',
    minTimeline: 'stats.performance.select.timeline.min',
    serverFps: 'stats.performance.select.timeline.server',
  };
  readonly labelsAsString = Object.keys(this.labels)
                                  .map((key) => this.labels[key]);
  lineChartSeriesLabels: string[];

  gradient = false;
  yAxis = true;
  xAxis = true;
  legend = false;
  legendTitle = false;
  showXAxisLabel = false;
  showYAxisLabel = true;
  autoscale = true;
  timeline = false;
  roundDomains = true;
  barAnimations = false;
  barPadding = 2;
  colorScheme = {
    name: 'nightLights',
    selectable: false,
    group: 'Ordinal',
    domain: [
      '#4e31a5', '#9c25a7', '#3065ab', '#57468b', '#904497', '#46648b',
      '#32118d', '#a00fb3', '#1052a2', '#6e51bd', '#b63cc3', '#6c97cb', '#8671c1', '#b455be', '#7496c3'
    ]
  };

  constructor(private translate: TranslateService) {
  }

  ngOnInit() {
    this.setBarChartLabel(this.labels.singleAvg);
  }

  ngOnChanges(changes: SimpleChanges) {
    if ((changes.war || changes.performanceData) && this.performanceData) {
      this.translate.get(['stats.performance.select.timeline.label.minimum',
        'stats.performance.select.timeline.label.average',
        'stats.performance.select.timeline.label.maximum']).subscribe((res) => {
        const resValues = Object.keys(res).map(val => res[val]);
        this.initializeChartData(resValues[2], resValues[0], resValues[1]);
      });
      Object.assign(this, [this.barChartData]);
      this.activeChartSelect = this.labels.singleAvg;
    }
  }

  selectChart(newSelection) {
    this.activeChartSelect = newSelection;
    if (this.activeChartSelect === this.labels.singleAvg || this.activeChartSelect === this.labels.singleMin) {
      this.showBarChart = true;
      this.setBarChartLabel(this.activeChartSelect);
      switch (this.activeChartSelect) {
        case this.labels.singleAvg:
          this.barChartData = this.tmpSingleAvg;
          break;
        case this.labels.singleMin:
          this.barChartData = this.tmpSingleMin;
          break;
      }
    } else {
      this.showBarChart = false;
      this.setLineChartLabel(this.activeChartSelect);
      switch (this.activeChartSelect) {
        case this.labels.avgTimeline:
          this.lineChartData = this.tmpAvgTimeline;
          break;
        case this.labels.minTimeline:
          this.lineChartData = this.tmpMinTimeline;
          break;
        case this.labels.serverFps:
          this.lineChartData = this.tmpServerTimeline;
      }
    }
  }

  initializeChartData(labelMax: string, labelMin: string, labelAvg: string) {
    this.tmpAvgTimeline = ChartUtils.getMultiDataArray(labelMax, labelAvg, labelMin);
    this.tmpMinTimeline = ChartUtils.getMultiDataArray(labelMax, labelAvg, labelMin);
    this.tmpServerTimeline = ChartUtils.getMultiDataArray(labelAvg, labelMin);

    const diffMs = (new Date(this.war.endDate).getTime() - new Date(this.war.date).getTime());
    const warDurationMinutes = Math.round(diffMs / 60000);

    const dateObj = new Date(this.war.date);
    dateObj.setHours(0);
    dateObj.setMinutes(1);

    this.tmpSingleAvg = [];
    this.tmpSingleMin = [];
    const maxAvgIdx = Math.min(this.performanceData.map(p => p.avgFps.length)
                                   .sort((a, b) => b - a)[0], warDurationMinutes);
    const maxMinIdx = Math.min(this.performanceData.map(p => p.avgFps.length)
                                   .sort((a, b) => b - a)[0], warDurationMinutes);
    let tmpAvgArray = new Array(maxAvgIdx).fill(0);
    const tmpAvgMin = new Array(maxAvgIdx).fill(1000);
    const tmpAvgMax = new Array(maxAvgIdx).fill(0);
    let tmpMinArray = new Array(maxMinIdx).fill(0);
    const tmpMinMin = new Array(maxMinIdx).fill(1000);
    const tmpMinMax = new Array(maxMinIdx).fill(0);

    this.performanceData.forEach((entry) => {
      if (entry.entityName !== 'SERVER') {
        // PLAYER AVERAGE TIMELINE DATA
        for (let i = 0; i < entry.avgFps.length && i < tmpAvgArray.length; i++) {
          tmpAvgArray[i] = tmpAvgArray[i] + entry.avgFps[i];
          tmpAvgMin[i] = Math.round(Math.min(tmpAvgMin[i], entry.avgFps[i]));
          tmpAvgMax[i] = Math.round(Math.max(tmpAvgMax[i], entry.avgFps[i]));
        }
        // PLAYER MINIMUM TIMELINE DATA
        for (let i = 0; i < entry.minFps.length && i < tmpMinArray.length; i++) {
          tmpMinArray[i] = tmpMinArray[i] + entry.minFps[i];
          tmpMinMin[i] = Math.round(Math.min(tmpMinMin[i], entry.minFps[i]));
          tmpMinMax[i] = Math.round(Math.max(tmpMinMax[i], entry.minFps[i]));
        }
      } else {
        // SERVER TIMELINE DATA
        for (let i = 0; i < entry.avgFps.length && i < warDurationMinutes; i++) {
          const currDate = new Date(dateObj.getTime() + i * 60000);
          this.tmpServerTimeline[0].series.push(ChartUtils.getSeriesEntry(currDate, entry.avgFps[i]));
          this.tmpServerTimeline[1].series.push(ChartUtils.getSeriesEntry(currDate, entry.minFps[i]));
        }
      }
      this.tmpSingleAvg.push({
        name: entry.entityName,
        value: entry.singleAvgFps
      });
      this.tmpSingleMin.push({
        name: entry.entityName,
        value: entry.singleMinFps
      });
    });

    tmpAvgArray = tmpAvgArray.map(x => Math.round(x / this.performanceData.length));
    for (let i = 0; i < tmpAvgArray.length; i++) {
      const currDate = new Date(dateObj.getTime() + i * 60000);
      this.tmpAvgTimeline[0].series.push(ChartUtils.getSeriesEntry(currDate, tmpAvgMax[i]));
      this.tmpAvgTimeline[1].series.push(ChartUtils.getSeriesEntry(currDate, tmpAvgArray[i]));
      this.tmpAvgTimeline[2].series.push(ChartUtils.getSeriesEntry(currDate, tmpAvgMin[i]));
    }
    tmpMinArray = tmpMinArray.map(x => Math.round(x / this.performanceData.length));
    for (let i = 0; i < tmpMinArray.length; i++) {
      const currDate = new Date(dateObj.getTime() + i * 60000);
      this.tmpMinTimeline[0].series.push(ChartUtils.getSeriesEntry(currDate, tmpMinMax[i]));
      this.tmpMinTimeline[1].series.push(ChartUtils.getSeriesEntry(currDate, tmpMinArray[i]));
      this.tmpMinTimeline[2].series.push(ChartUtils.getSeriesEntry(currDate, tmpMinMin[i]));
    }
    this.tmpSingleAvg.sort((a, b) => a.value - b.value);
    this.tmpSingleMin.sort((a, b) => a.value - b.value);
    this.barChartData = this.tmpSingleAvg;
  }

  setLineChartLabel(i18n: string) {
    this.translate.get(i18n).subscribe((translated) => {
      this.lineChartLabel = translated;
    });
  }

  setBarChartLabel(i18n: string) {
    this.translate.get(i18n).subscribe((translated) => {
      this.barChartLabel = translated;
    });
  }
}