import {
  Directive,
  Host,
  HostBinding,
  HostListener,
  ElementRef,
  Renderer2,
  Input
} from '@angular/core';
import { FDropdownDirective } from './f-dropdown.directive';

@Directive({
  selector: '[fDropdownToggle]'
})
export class FDropdownToggleDirective {
  private _disabled = false;
  @Input()
  set dpDisabled(value: boolean) {
    this._disabled = value;
  }
  @HostBinding('class.disabled')
  get disableCls() {
    return this._disabled;
  }

  @HostBinding('attr.aria-haspopup') haspopup = true;
  @HostListener('click', ['$event'])
  onclick(ev: MouseEvent) {
    if (this._disabled) {
      return;
    }
    if (this.dropdown.isSubDP) {
      ev.stopImmediatePropagation();
    }
    this.dropdown.toggle();
  }
  private nativeEle = null;
  constructor(private dropdown: FDropdownDirective, private elementRef: ElementRef) {
    dropdown.toggleElement = elementRef.nativeElement;
    this.nativeEle=elementRef.nativeElement;
    this.dropdown.getOpenState().subscribe((state: boolean) => {
      if (this.dropdown.isSubDP && this.dropdown.isOpen) {
        if (this.nativeEle.className.indexOf('active') < 0) {
          this.nativeEle.className += ' active';
        }
      } else {
        if (this.nativeEle.className.indexOf('active') > -1) {
          this.nativeEle.className=this.nativeEle.className.replace(' active', ' ');
        }
      }
    });
  }
}