import {Component, ElementRef, Input, ViewChild} from "@angular/core";

declare var UIkit;

@Component({
  selector: 'dropdown-filter',
  template: `
  <button class="uk-button uk-button-default uk-flex uk-flex-middle"
          [class.uk-disabled]="disabled" [disabled]="disabled">
    <span>{{name}}<span *ngIf="count > 0">({{count}})</span></span>
    <icon [flex]="true" class="uk-margin-xsmall-left" [name]="'expand_' + (isOpen?'less':'more')"></icon>
  </button>
  <div #dropdownElement class="uk-dropdown"
       [class.uk-height-max-large]="overflow" [class.uk-overflow-auto]="overflow"
       [ngStyle]="dropdownMinWidth?{'min-width.px': dropdownMinWidth}:''"
       [ngClass]="dropdownClass" uk-dropdown="mode: click; delay-hide: 0;">
    <div>
      <ng-content></ng-content>
    </div>
  </div>
  `
})
export class DropdownFilterComponent {
  @Input()
  public name;
  @Input()
  public count: number = 0;
  @Input()
  public dropdownClass: string;
  @Input()
  public dropdownMinWidth: number;
  @Input()
  public overflow: boolean = true;
  @Input()
  public disabled = false;
  @ViewChild("dropdownElement") dropdownElement: ElementRef;
  
  get isOpen() {
    return (typeof document !== 'undefined') && this.dropdownElement && UIkit.dropdown(this.dropdownElement.nativeElement).isActive();
  }
  
  closeDropdown() {
    UIkit.dropdown(this.dropdownElement.nativeElement).hide();
  }
}