import { AfterViewChecked, AfterViewInit, ChangeDetectorRef, Component, ElementRef, Injector, Input, NgZone, OnChanges, OnInit, Optional, Renderer2, SimpleChange, SimpleChanges, ViewChild } from '@angular/core';
import { has as _has } from 'lodash/object';

@Component({
  selector: 'knk-knok-score',
  exportAs: 'knkKnokScore',
  templateUrl: './knk-knok-score.component.pug',
  styleUrls: ['./knk-knok-score.component.scss']
})
export class KnkKnokScoreComponent implements OnChanges, AfterViewInit {
  @Input('profitability') profitability: number;
  @Input('usefulness') usefulness: number;
  @Input('clarity') clarity: number;
  @Input('dense') dense: boolean;
  @Input('value') value: number;
  @Input('maxvalue') max: number = 5;

  @ViewChild('gradeIcon', {read: ElementRef}) gradeIconRef: ElementRef;
  @ViewChild('circleBackground', {read: ElementRef}) circleBackgroundRef: ElementRef;
  @ViewChild('circleForeground', {read: ElementRef}) circleForegroundRef: ElementRef;

  readonly min: number = 0;
  shown: boolean = false;

  get score(): number {
    const avg: number = this.value || this.value === 0 ? this.value : (this.profitability + this.usefulness + this.clarity) / 3;
    return Math.min(Math.max(+avg, this.min), this.max);
  }

  get scorePercentage(): number {
    return (100 / this.max) * this.score;
  }

  get profitabilityPercentage(): number {
    return (100 / this.max) * this.profitability;
  }

  get usefulnessPercentage(): number {
    return (100 / this.max) * this.usefulness;
  }

  get clarityPercentage(): number {
    return (100 / this.max) * this.clarity;
  }

  get foregroundCircumference(): number {
    // let foreground: SVGCircleElement = this.circleForegroundRef.nativeElement;
    // return 2 * Math.PI * foreground.r.baseVal.value;
    return 2 * Math.PI * this.gradeShape.r;
  }

  get foregroundDashOffset(): number {
    return this.foregroundCircumference - ((this.foregroundCircumference * this.scorePercentage) / 100);
  }

  get maxScore(): number {
    return this.max ? this.max : 0;
  }

  get gradeShape(): any {
    let x: number = 0;
    let y: number = 0;
    let width: number = (this.dense) ? 35 : 120;
    let height: number = (this.dense) ? 35 : 120;
    let cx: number = width / 2;
    let cy: number = height / 2;
    let r: number = (cx * 0.4666666666666667) + (cy * 0.4666666666666667);
    let viewbox: string = `${x} ${y} ${width} ${height}`;
    let shape: any = {x, y, width, height, cx, cy, r, viewbox};
    return shape;
  }

  constructor(private changeDetector: ChangeDetectorRef,
              @Optional() private context: Injector,
              private renderer: Renderer2,
              private zone: NgZone) {
    this.profitability = this.min;
    this.usefulness = this.min;
    this.clarity = this.min;
    this.dense = false;
    this.shown = false;
  }

  ngOnChanges(changes: SimpleChanges): void {
    // if (_has(changes, ['profitability'])) {
    //   this.profitability = Math.min(Math.max(+changes.profitability.currentValue, this.min), this.max);
    // }

    // if (_has(changes, ['usefulness'])) {
    //   this.usefulness = Math.min(Math.max(+changes.usefulness.currentValue, this.min), this.max);
    // }

    // if (_has(changes, ['clarity'])) {
    //   this.clarity = Math.min(Math.max(+changes.clarity.currentValue, this.min), this.max);
    // }
  }

  ngAfterViewInit(): void {
    this.zone.run((): void => {
      const timeout: any = setTimeout((): void => {
        clearTimeout(timeout);
        this.shown = true;
        this.changeDetector.markForCheck();
        // this.changeDetector.detectChanges();
      }, 10);
    });
  }
}
