import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { Item, Operator } from './filtering.interface';

@Component({
  selector:        'app-filter-operator',
  template:        `
                     <div (click)="isOpen = !isOpen">{{ operator?.name }}</div>
                     <app-dropdown-list
                       *ngIf="isOpen"
                       (appClickOutside)="isOpen = !isOpen"
                       [items]="processedOperators"
                       [selectedItem]="operator"
                       (selectItem)="isOpen = !isOpen;change.emit($event.id)"></app-dropdown-list>
                   `,
  styles:          [`
    :host {
      position: relative;
    }
  `],
  changeDetection: ChangeDetectionStrategy.Default
})
export class FilterOperatorComponent {
  isOpen: boolean;

  processedOperators = [];
  // ===== operators =====
  _operators;
  @Input()
  set operators (val: Operator) {
    this._operators = val;
    /**
     * Create values array compatible with app-dropdown-list component
     */
    this.processedOperators = [];
    for (const key in val) {
      if (val.hasOwnProperty(key)) {
        this.processedOperators.push({id: key, name: val[key]});
      }
    }
  }

  get operators () {
    return this._operators;
  }

  // ===== operators =====

  // ===== operator =====
  private _operator: any;
  @Input()
  set operator (val: any) {
    if (typeof val === 'undefined') {
      return;
    }

    this._operator = {id: val, name: this.operators[val]};
  }

  get operator () {
    return this._operator;
  }

  // ===== operator =====

  @Output() change = new EventEmitter();
}