import { Component, Input, OnChanges } from '@angular/core';
import { RdComponent } from '../../base/rdComponent';

export type ProgressBarTypes = 'normal' | 'stacted';
export type ProgressBarFormats = 'regular' | 'irregular' | 'custom';
export type ProgressBarDirections = 'horizontal' | 'vertical';
@Component({
  selector: 'rd-progress-bar',
  template: `
      <div class="progress m-progress--lg" [ngStyle]="style">
        <div class="{{finalizedClass + ' progress-bar-striped'}}" role="progressbar" [attr.aria-valuenow]="value" [attr.aria-valuemin]="min" [attr.aria-valuemax]="max" 
          [ngStyle]="{'width':max == 100 ? (value + '%') : ((value/max) * 100 + '%'),'height':(height + 'rem')}" *ngIf="type == 'normal'">
          %{{value}}
        </div>
        <ng-container *ngIf="type == 'stacted'">
          <div class="progress-bar bg-success progress-bar-striped" role="progressbar" style="border-radius:0" [ngStyle]="{'width':sccLimit + '%','height':(height + 'rem')}">
            %{{sccLimit}}
          </div>
          <div class="progress-bar bg-warning progress-bar-striped" role="progressbar" style="border-radius:0" [ngStyle]="{'width':warnLimit + '%','height':(height + 'rem')}">
            %{{warnLimit}}
          </div>
          <div class="progress-bar bg-danger progress-bar-striped" role="progressbar" style="border-radius:0" [ngStyle]="{'width':errLimit + '%','height':(height + 'rem')}">
            %{{errLimit}}
          </div>
        </ng-container>
      </div>
    `
})
export class ProgressBar extends RdComponent implements OnChanges {
  @Input('rd-value') value: number = 0;
  @Input('rd-format') format: ProgressBarFormats = "regular";
  @Input('rd-type') type: ProgressBarTypes = "normal";
  @Input('rd-warning-limit') warnLimit: number = 0;
  @Input('rd-success-limit') sccLimit: number = 0;
  @Input('rd-error-limit') errLimit: number = 0;
  @Input('rd-total-count') total: number = 1;
  @Input('rd-min') min: number = 0;
  @Input('rd-max') max: number = 100;
  @Input('rd-width') width: number = 100;
  @Input('rd-height') height: number = 1.7;
  @Input('rd-direction') direction: ProgressBarDirections = "horizontal";

  public style: any = {};
  public finalizedClass: string = "";

  ngOnChanges() {
    if (this.value == null || this.value == undefined) return;

    if (this.type == "normal") {
      this.setLimits();
      if (this.format == 'regular') {
        if (this.value <= this.errLimit) this.finalizedClass = 'bg-danger';
        else if (this.value >= this.warnLimit && this.value < this.sccLimit) this.finalizedClass = 'bg-warning';
        else if (this.value >= this.sccLimit) this.finalizedClass = 'bg-success';
      }
      else if (this.format == 'irregular') {
        if (this.value <= this.warnLimit) this.finalizedClass = 'bg-warning';
        else if (this.value >= this.sccLimit && this.value < this.errLimit) this.finalizedClass = 'bg-success';
        else if (this.value >= this.errLimit) this.finalizedClass = 'bg-danger';
      }
      else if (this.format == 'custom') {
        if (this.value <= this.errLimit) this.finalizedClass = 'bg-warning';
        else if (this.value >= this.warnLimit && this.value < this.sccLimit) this.finalizedClass = 'bg-info';
        else if (this.value >= this.sccLimit) this.finalizedClass = 'bg-success';
      }
    }
    else if (this.type == "stacted") {
      this.sccLimit = parseInt(((this.sccLimit / this.total) * 100).toFixed(0));
      this.warnLimit = parseInt(((this.warnLimit / this.total) * 100).toFixed(0));
      this.errLimit = parseInt(((this.errLimit / this.total) * 100).toFixed(0));
    }

    this.style = { "width": this.width + "%", "height": this.height + "rem" };

    if (this.direction == "vertical") {
      this.style = { ...this.style, "transform": "rotate(-90deg)", "writing-mode": "vertical-lr" }
    }
  }

  setLimits() {
    if (this.format == "regular") {
      this.errLimit = this.errLimit || 40;
      this.warnLimit = this.warnLimit || 41;
      this.sccLimit = this.sccLimit || 80;
    }
    else {
      this.errLimit = this.errLimit || 80;
      this.sccLimit = this.sccLimit || 41;
      this.warnLimit = this.warnLimit || 40;
    }
  }
}