import { Directive, Input, ElementRef, Renderer2 } from '@angular/core';

// tslint:disable-next-line: directive-selector
@Directive({ selector: '[centerBottomDuringTransition]' })
export class CenterBottomDuringTransitionDirective {
  @Input() set inTransition(isTransitioning: boolean) {
    this.applyPosition(isTransitioning);
  }

  @Input() className = 'in-transition';

  constructor(private elementRef: ElementRef, private renderer: Renderer2) {}

  applyPosition(inTransition: boolean) {
    const nativeElement = this.elementRef.nativeElement;

    if (!nativeElement) {
      return;
    }

    if (inTransition) {
      this.renderer.addClass(nativeElement, this.className);
    }

    if (!inTransition) {
      this.renderer.removeClass(nativeElement, this.className);
    }
  }
}
