import { Component, Optional, Input, Injector, ElementRef, ViewChild, HostBinding, ChangeDetectorRef, HostListener, OnDestroy, ViewEncapsulation } from '@angular/core';
import './js/TweenMax.min.js';
import { initButtonDistorted } from './js/main.js';

@Component({
  selector: 'ng-button-distorted',
  exportAs: 'ngButtonDistorted',
  templateUrl: './ng-button-distorted.component.pug',
  styleUrls: ['./css/main.scss'],
  encapsulation: ViewEncapsulation.None
})
export class NgButtonDistortedComponent implements OnDestroy {
  @Input('class') className: string = '';
  @Input('disabled') disabled: boolean = false;
  @Input('type') type: ('button' | 'submit' | 'reset') = 'button';
  @ViewChild('model', {read: ElementRef}) model: ElementRef;

  @HostBinding('class') private get classList(): string {
    return `ng-button-distorted ${this.className}`;
  }
  private timeLineButton: any = null;

  constructor(private changeDetector: ChangeDetectorRef,
              @Optional() private context: Injector) {
  }

  ngOnDestroy(): void {
    if (this.timeLineButton !== null) {
      this.timeLineButton.clear();
    }
  }

  @HostListener('click')
  onClick(): void {
    if (this.timeLineButton === null) {
      let button: HTMLElement = this.model.nativeElement;
      this.timeLineButton = initButtonDistorted(button);
      this.changeDetector.markForCheck();
    }

    if (this.timeLineButton !== null) {
      this.timeLineButton.restart();
    }
  }
}
