import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import {FilterInfo} from '../types/filter-info';
import {FiltersDataService} from '../providers/filters-data.service';
import {SelectedFiltersDataService} from '../providers/selected-filters-data.service';
import {FilterChangeNotifyService} from '../providers/filter-change-notify.service';


/**
 *
 * @Input() filterData : { "true": " true text",  "false": "false text"}
 *
 * */

@Component({
  selector: 'ics-toggle-dynamic',
  templateUrl: './toggle-dynamic.component.html',
  styleUrls: ['./toggle-dynamic.component.scss']
})
export class ToggleDynamicComponent implements OnInit {
  @Input() filterInfo: FilterInfo;
  @Input() filterData: any;
  @Input() color;
  @Input() checked;
  @Input() disabled;
  @Output() instantiated: EventEmitter<FilterInfo>;
  @Output() filterSet: EventEmitter<FilterInfo>;
  public text: string;
  constructor(
    private filtersDataService: FiltersDataService,
    private fs: SelectedFiltersDataService,
    private broadcastService: FilterChangeNotifyService
  ) {
    this.instantiated = new EventEmitter<FilterInfo>();
    this.filterSet = new EventEmitter<FilterInfo>();
  }

  ngOnInit() {
    if (this.color === undefined || this.color === null) {
      this.color = 'accent';
    }
    if (this.checked === undefined || this.checked === null) {
      this.checked = false;
    }
    if (this.disabled === undefined || this.disabled === null) {
      this.disabled = false;
    }

    if (this.filterData === undefined || this.filterData === null) {
      throw new Error('no filter data for ' + this.filterInfo.name);
    }
    // filter instantiated
    this.instantiated.emit(this.filterInfo);
    this.updateText();
    this.storeValue();
    this.resolve();
  }
  notify() {
    this.broadcastService.notifyFilterChange(this.filterInfo);
  }
  onChange(e) {
    // change to the new value emmited from the event
    this.checked = e.checked;
    this.storeValue();
    this.updateText();
    this.notify();
  }
  updateText() {
    this.text = this.filterData[this.checked];
  }
  resolve() {
    this.filterSet.emit(this.filterInfo);
  }
  storeValue() {
    this.fs.storeSelectedData(this.filterInfo.name, this.checked);
  }


}