import { Component, Input, Output, ElementRef, EventEmitter, OnInit, OnChanges, OnDestroy } from '@angular/core';
import { RdComponent } from '../../base/rdComponent';
import { ScriptLoaderService } from '../../library/script-loader.service';
import { StyleLoaderService } from '../../library/style-loader.service';

@Component({
  selector: 'rd-progress-timer',
  template: `
    <div class="row col-md-12">
      <div class="col-md-11">
        <div id="progressTimer"></div>        
      </div>
      <div class="col-md-1" style="margin-top:-3px">
        <span [ngStyle]="{'color':color}">{{time}}</span>
      </div>
    </div>
  `
})
export class ProgressTimer extends RdComponent implements OnInit, OnChanges, OnDestroy {
  constructor(private element: ElementRef, private _script: ScriptLoaderService, private _style: StyleLoaderService) {
    super();
    this._script.load(["./assets/js/progressTimer.min.js"]);
    this._style.load(["./assets/css/progressTimer.css"])
  }

  @Input("rd-limit") timeLimit: number = 60; // milisecond
  @Input("rd-refresh") refresh: boolean = false;
  @Input("rd-text-color") color: string = "white";

  @Output("rd-finish") onFinish: EventEmitter<any> = new EventEmitter<any>();

  minute: number;
  second: number;
  time: string;
  interval;

  ngOnInit() {
    this.setProgressTimer();
  }

  ngOnChanges(changes) {
    if (changes.refresh && this.refresh) this.setProgressTimer();
  }

  ngOnDestroy() {
    clearInterval(this.interval);
  }

  setProgressTimer() {
    this.jQuery(this.element.nativeElement).find("#progressTimer").progressTimer({
      timeLimit: this.timeLimit,
      baseStyle: 'progress-bar-success',
      warningStyle: 'progress-bar-warning',
      completeStyle: 'progress-bar-danger',
      onFinish: () => {
        this.onFinish.emit();
        this.time = "00:00";
        clearInterval(this.interval);
      }
    });

    let copyTimeLimit = this.timeLimit;

    this.interval = setInterval(function () {
      this.minute = Math.floor((copyTimeLimit - 1) / 60);
      this.second = (copyTimeLimit - 1) % 60;
      this.time = (this.minute.toString().length == 1 ? ("0" + this.minute) : this.minute);
      this.time += ":";
      this.time += (this.second.toString().length == 1 ? ("0" + this.second) : this.second);
      copyTimeLimit--;
    }.bind(this), 1000);
  }
}