import {Component, OnInit} from '@angular/core';
import Chart from 'chart.js';
import {BackendService, ScrumStatus, ScrumUser, ScrumUserstory, ScrumSprint} from '../services/backend.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: 'dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  /**
   * Returns the status that are used by at least one userstory.
   */
  public get usedStatus(): ScrumStatus[] {
    return this.status.filter(s => this.userstories.find(us => us.statusid === s.id) !== undefined);
  }

  private status: ScrumStatus[];
  private userstories: ScrumUserstory[];
  private sprints: ScrumSprint[];

  constructor(private backendService: BackendService) {
    // backendService.getUserstories().subscribe(response => {
    //   if (response.status > 399) {
    //     alert('Fehler');
    //   } else {
    //     this.userstories.push(...response.body);
    //   }
    // });
    // backendService.getAllStatus().subscribe(response => {
    //   if (response.status > 399) {
    //     alert('Fehler');
    //   } else {
    //     this.status.push(...response.body);
    //   }
    // });
    // backendService.getSprints().subscribe(response => {
    //   if (response.status > 399) {
    //     alert('Fehler');
    //   } else {
    //     this.sprints.push(...response.body);
    //   }
    // });

    this.status = [
      {id: 0, title: "In progress", description:""},
      {id: 1, title: "Done", description:""},
    ];
    this.userstories = [
      {statusid: 0, title:""},
      {statusid: 0, title:""},
      {statusid: 0, title:""},
      {statusid: 1, title:""},
      {statusid: 1, title:""},
    ];
    this.sprints = [
      {description:"", title:"", project: 0, startDate: new Date(2020, 5, 22), endDate: new Date(2020, 5, 28)},
      {description:"", title:"", project: 0, startDate: new Date(2020, 5, 29), endDate: new Date(2020, 6, 5)},
    ]
  }


  ngOnInit(): void {
    // @ts-ignore
    const context = document.getElementById('done-stories-chart').getContext('2d');
    const chart = new Chart(context, {
      type: 'pie',
      data: {
        labels: this.usedStatus.map(s => s.title),
        datasets: [{
          label: 'Done stories',
          data: this.usedStatus.map(s => this.getNumberOfUserstoriesByStatus(s)),
          backgroundColor: this.getBackgroundColors(),
        }]
      }
    });
  }

  private getBackgroundColors(): string[] {
    const baseColors = [
      'rgb(255, 153, 102)',
      'rgb(255, 102, 102)',
      'rgb(153, 204, 255)',
      'rgb(102, 153, 102)',
      'rgb(204, 204, 153)',
      'rgb(153, 102, 204)',
      'rgb(204, 102, 102)',
      'rgb(255, 204, 153)',
      'rgb(153, 102, 255)',
      'rgb(204, 204, 204)',
      'rgb(102, 255, 204)',
      'rgb(102, 153, 255)',
      'rgb(153, 102, 153)',
      'rgb(204, 204, 255)',
    ];
    const colors = [];
    while (colors.length < this.usedStatus.length) {
      colors.push(...baseColors);
    }
    return colors;
  }

  public getNumberOfUserstoriesByStatus(status: ScrumStatus): number {
    return this.userstories.filter(us => us.statusid === status.id).length;
  }

  public getRemainingDaysInSprint(): number {
    const now = new Date();
    const currentSprint = this.sprints.find(s => s.endDate > now && s.startDate < now);
    if (currentSprint === undefined) {
      return undefined;
    }
    const daysDelta = Math.floor((currentSprint.endDate.getTime() - now.getTime()) / 86400000);
    return daysDelta;
  }

  public getSprintUrgency(): number {
    const now = new Date();
    const currentSprint = this.sprints.find(s => s.endDate > now && s.startDate < now);
    if (currentSprint === undefined) {
      return undefined;
    }
    const deltaFromNow = currentSprint.endDate.getTime() - now.getTime();
    const deltaFromStart = currentSprint.endDate.getTime() - currentSprint.startDate.getTime();
    return Math.floor(3 * deltaFromNow / deltaFromStart);
  }
}