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

@Component({
  selector: 'pdb-image-toggle',
  templateUrl: './image-toggle.component.html',
  styleUrls: ['./image-toggle.component.scss']
})
export class ImageToggleComponent implements OnInit {

  @Input()
  images : string = "";
  
  index: number = 0;
  
  @Output()
  valueChanged : EventEmitter<number> = new EventEmitter<number>();
  
  text = undefined;
  
  _states : Array<any>;

  constructor() { }

  ngOnInit() {
    this._states = JSON.parse(this.images);
    this.text = this._states[this.index].text;
  }
  
  imageUrl() : string {
    return this._states[this.index].imageUrl;
  }
  
  title() : string {
    return this._states[this.index].title;
  }

  toggle(event){
    this.index = (this.index+1) % this._states.length;
    this.text = this._states[this.index].text;
    this.valueChanged.emit(this._states[this.index].value);
  }
}