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

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

  @Input() fields: Array<Field>;
  @Input() field: Field;

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