import { Directive, ElementRef, OnDestroy, Renderer2 } from '@angular/core';
import { Keyboard } from '@ionic-native/keyboard';
import { Subscription } from 'rxjs/Subscription';

@Directive({
  selector: '[hideWhenKeyboardIsOpen]'
})
export class HideWhenKeyboardIsOpenDirective implements OnDestroy {
  private show: Subscription;
  private hide: Subscription;

  constructor(
    public element: ElementRef,
    public renderer: Renderer2,
    public keyboard: Keyboard
  ) {
    this.show = keyboard.onKeyboardShow().subscribe(() => {
      renderer.setStyle(element.nativeElement, 'visibility', 'hidden');
    });

    this.hide = keyboard.onKeyboardHide().subscribe(() => {
      renderer.removeStyle(element.nativeElement, 'visibility');
    });
  }

  ngOnDestroy(): void {
    if (this.hide !== undefined) this.hide.unsubscribe();

    if (this.show !== undefined) this.show.unsubscribe();
  }
}