import {
  AfterViewInit,
  ChangeDetectionStrategy,
  Component,
  DoCheck,
  ElementRef,
  Input,
  OnInit,
  ViewChild
} from '@angular/core';
import { TranslateService } from "@ngx-translate/core";
import { forkJoin } from "rxjs";

@Component({
  selector: 'histogram-chart',
  templateUrl: './histogram-chart.component.html',
  styleUrls: ['./histogram-chart.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HistogramChartComponent implements OnInit, AfterViewInit, DoCheck {
  @Input()
  metadata: Array<{
    text: string,
    value: number,
    color: string
  }> = [];
  translatedTextArr: Array<string> = [];
  @Input()
  isWhiteBackground: boolean = false;
  max: number;
  scale: number;
  hasViewInit: boolean = false;
  @ViewChild('barChart') barChart: ElementRef;
  public context: CanvasRenderingContext2D;
  constructor(private translate: TranslateService) { }

  ngOnInit() {
    this.translateText();
  }
  ngAfterViewInit(): void {
    this.hasViewInit = true;
    this.initChart();
  }
  ngDoCheck() {
    if (this.hasViewInit) {
      this.initChart();
    }
  }
  translateText() {
    if (this.metadata && this.metadata.length > 0) {
      let textArr = [];
      this.metadata.forEach(item => {
        textArr.push(this.translate.get(item.text));
      });
      forkJoin(textArr).subscribe(
          (res: string[]) => {
            this.translatedTextArr = res;
            if (this.hasViewInit) {
              this.initChart();
            }
          }
      );
    }
  }
  initChart() {
    if (this.barChart && this.metadata && this.metadata.length > 0) {
      this.barChart.nativeElement.width = "240";
      this.barChart.nativeElement.height = 25 + 20 * this.metadata.length + "";
      this.context = this.barChart.nativeElement.getContext('2d');
      this.getMax();
      if (this.isWhiteBackground) {
        this.context.fillStyle = "#000";
      } else {
        this.context.fillStyle = "#fff";
      }
      this.drawLine(50, 0, 50, 5 + this.metadata.length * 20);
      this.drawLine(50, 5 + this.metadata.length * 20, 250, 5 + this.metadata.length * 20);
      this.drawLine(90, 5 + this.metadata.length * 20, 90, 2 + this.metadata.length * 20);
      this.drawLine(130, 5 + this.metadata.length * 20, 130, 2 + this.metadata.length * 20);
      this.drawLine(170, 5 + this.metadata.length * 20, 170, 2 + this.metadata.length * 20);
      this.drawLine(210, 5 + this.metadata.length * 20, 210, 2 + this.metadata.length * 20);
      this.context.font = "12px";
      this.context.textAlign = "center";
      this.context.fillText(this.scale.toString(), 90, this.metadata.length * 20 + 18, 50);
      this.context.fillText((2 * this.scale).toString(), 130, this.metadata.length * 20 + 18, 50);
      this.context.fillText((3 * this.scale).toString(), 170, this.metadata.length * 20 + 18, 50);
      this.context.fillText((4 * this.scale).toString(), 210, this.metadata.length * 20 + 18, 50);
      this.metadata.forEach((item, index) => {
        this.drawBar(index, item.color, item.value);
      });
    }
  }
  drawBar(index: number, color: string, value: number) {
    this.context.textBaseline = "middle";
    this.context.textAlign = "left";
    this.context.fillStyle = color;
    this.context.fillRect(50, 5 + index * 20, value / this.scale * 40, 15);
    this.context.fillText(value.toString(), (value / this.scale * 40) + 53, 12 + index * 20, 37);
    this.context.textAlign = "right";
    let text = "";
    if (this.translatedTextArr && this.translatedTextArr.length > 0) {
      text = this.translatedTextArr[index];
    } else {
      text = this.metadata[index].text;
    }
    this.context.fillText(text, 47, 12 + index * 20, 47);
  }
  drawLine(x, y, X, Y) {
    this.context.beginPath();
    this.context.moveTo(x, y);
    this.context.lineTo(X, Y);
    if (this.isWhiteBackground) {
      this.context.strokeStyle = "#000";
    } else {
      this.context.strokeStyle = "#fff";
    }
    this.context.stroke();
    this.context.closePath();
  }
  getMax() {
    let count = 1;
    if (this.metadata && this.metadata.length > 0) {
      this.metadata.forEach(item => {
        if (item.value > count) {
          count = item.value;
        }
      });
    }
    this.max = count;
    this.scale = Math.ceil(count / 40) * 10;
  }
}