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

@Component({
  selector: 'moblab-selector',
  template: `
  <div *ngIf="isShown">
      <md-list-item>
      <label class="moblab-selector-label"> {{title}} </label>
      <md-select
       placeholder="{{placeholder}}"
       [(ngModel)]="selectedValue" (ngModelChange)="onChange($event)">>
        <md-option *ngFor="let option of options" [value]="option">{{option}}</md-option>
      </md-select>
      </md-list-item>
  </div>
`,
  styleUrls: ['../app.component.css'],
})

export class MoblabSelector {
  @Input() title: string;
  @Input() placeholder: string;
  @Input() options: string[];
  @Input() isShown: boolean = true;

  @Output() update = new EventEmitter();
  @Output() value: string = null;

  onChange(event) : void {
   console.log(event);
   this.value = event;
   this.update.emit({value:event});
  }

  setVisible(newState) : void {
    this.isShown = newState;
  }

  getSelectedValue() : string {
    if (!this.isShown) {
      return null;
    } else {
      return this.value;
    }
  }
}