import {
  AfterContentInit,
  Component,
  ContentChildren,
  EventEmitter,
  Input,
  OnDestroy,
  Output,
  QueryList
} from "@angular/core";
import {InputComponent} from "../input/input.component";

@Component({
  selector: 'advanced-search-input',
  template: `
    <div class="advanced-search-input">
      <div class="uk-grid uk-flex-middle" uk-grid>
        <div class="uk-width-expand">
          <div class="uk-grid uk-grid-collapse inputs" uk-grid>
            <ng-content></ng-content>
          </div>
        </div>
        <div class="uk-width-auto">
          <div class="uk-margin-medium-right search" [class.disabled]="disabled" (click)="searchEmitter.emit()">
            <icon name="search" [flex]="true"></icon>
          </div>
        </div>
      </div>
    </div>
  `
})
export class AdvancedSearchInputComponent implements AfterContentInit, OnDestroy {
  @ContentChildren(InputComponent) inputs: QueryList<InputComponent>
  @Input() disabled: boolean = false;
  @Output() searchEmitter: EventEmitter<void> = new EventEmitter<void>();
  
  constructor() {
  }
  
  ngAfterContentInit() {
    this.inputs.forEach(input => {
      input.inputClass = 'advanced';
    });
  }
  
  ngOnDestroy() {
  }
}