import { Component, OnInit,Input, Output, EventEmitter, OnChanges } from '@angular/core';

@Component({
  selector: 'app-wizardbutton',
  templateUrl: 'wizardbutton.component.html',
  styleUrls: ['wizardbutton.component.css']
})
export class WizardbuttonComponent implements OnInit {
  @Input() eventName: string;
  @Input() step:number;
  @Input() score: number;
  @Input() status: string;
  @Input() ActiveStep:number;

  imgPath: string;
  classTitle:string;
  img_path = '../assets/img/Taflow/';
  tiles = [
    { src: this.img_path + 'MettleTest_icon.png'},
    { src: this.img_path + 'MiniPlayground_Icon.png' },
    { src: this.img_path + 'MiniPlayground_Selected_Icon.png'},
    { src: this.img_path + 'Playground_Icon.png' },
    { src: this.img_path + 'Playground_selected_Icon.png'}
  ];


  techdisabled:boolean;
  bsnsdisabled:boolean;
  constructor() {

  }
  /*ngOnChanges(changes: SimpleChanges) {
    if (changes['ActiveStep']) {
     console.log('ActiveStep', this.ActiveStep);
      if(this.ActiveStep == 1){
        this.classTitle = 'active'
      }
      else if (this.ActiveStep == 2){
        this.classTitle = 'active'
      }
      else if(this.ActiveStep == 3){
        this.classTitle = 'active'
      }

    }
  }*/
  ngOnInit() {


    if(this.status == 'ONBOARDED' || this.status == 'TA_APPROVED' || this.status == 'TA_REJECTED' || this.status == 'TA_REJECTED' || this.status == 'METTL_SCHEDULED'
      || this.status == 'METTL_APPROVED' || this.status == 'METTL_REJECTED' || this.status == 'METTL_REVIEW'){
      this.techdisabled = true;
      this.bsnsdisabled = true;
    }
    else if(this.status == 'COACH_ASSIGNED' || this.status == 'COACH_APPROVED' || this.status == 'COACH_REJECTED' || this.status == 'MINI_PG_STARTED'
      || this.status == 'MINI_PG_COMPLETED'
      || this.status == 'MINI_PG_COACH_REJECTED'
      || this.status == 'MINI_PG_COACH_APPROVED'
      || this.status == 'MINI_PG_COACH_REJECTED'){
      this.techdisabled = false;
      this.bsnsdisabled = true;
    }
    else{
      this.techdisabled = false;
      this.bsnsdisabled = false;
    }

    console.log('inputdata', this.eventName, this.score, this.status);
    if(this.step == 1 ){
      this.classTitle='active'
      this.imgPath = this.tiles[0].src;
    }
    else if(this.step == 2 && this.techdisabled){
      this.classTitle = 'disabled';
      this.imgPath = this.tiles[1].src;
    }
    else if(this.step == 2){
      this.imgPath = this.tiles[2].src;
    }
    else if(this.step == 3 && this.bsnsdisabled ){
      this.classTitle = 'disabled';
      this.imgPath = this.tiles[3].src;
    }
    else if(this.step == 3){
      this.imgPath = this.tiles[4].src;
    }


  }

}
