import {Component, ElementRef, EventEmitter, Input, OnInit, Output} from "@angular/core";
import {fromEvent, Subscription} from 'rxjs';
import {delay} from "rxjs/operators";

@Component({
  selector: 'fs-modal',
  template: `
    <div class="fs-modal">
      <div class="fs-modal-bg" (click)="close()"></div>
      <div id="fs-modal" class="fs-modal-dialog">
        <!--<a class="close" (click)="close()">
          <icon name="close"></icon>
        </a>-->
        <div class="header">
          <div class="uk-flex-middle uk-grid" uk-grid>
            <h4 *ngIf="title" class="uk-margin-remove uk-width-expand uk-text-truncate">{{title}}</h4>
            <div *ngIf="cancelButton || okButton" class="uk-flex uk-flex-right">
              <div>
                <ng-content select="[actions]"></ng-content>
              </div>
              <button *ngIf="cancelButton" class="uk-button uk-button-secondary outlined uk-margin-small-left" [disabled]="cancelButtonDisabled" (click)="close()">{{cancelButtonText}}</button>
              <button *ngIf="okButton" class="uk-button uk-button-secondary uk-margin-small-left" [disabled]="okButtonDisabled" (click)="ok()">{{okButtonText}}</button>
            </div>
          </div>
        </div>
        <div class="content">
          <ng-content></ng-content>
        </div>
      </div>
    </div>
  `
})
export class FullScreenModalComponent implements OnInit {
  okButtonText = 'OK';
  cancelButtonText = 'Cancel';
  cancelButton: boolean = false;
  okButton: boolean = false;
  title: string = null;
  @Input()
  okButtonDisabled = false;
  @Input()
  cancelButtonDisabled = false;
  @Output()
  okEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
  @Output()
  cancelEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
  opened: boolean = false;
  private readonly element: any;
  private subscriptions: any[] = [];
  private clickedInside: boolean;
  
  constructor(private el: ElementRef) {
    this.element = el.nativeElement;
  }
  
  ngOnInit() {
    if (typeof document !== "undefined") {
      document.body.appendChild(this.element);
      this.subscriptions.push(fromEvent(document, 'keydown').pipe(delay(1)).subscribe((event: KeyboardEvent) => {
        if(event.keyCode === 27) {
          this.close();
        }
      }));
    }
  }
  
  ngOnDestroy(): void {
    this.element.remove();
    this.subscriptions.forEach(subscription => {
      if (subscription instanceof Subscription) {
        subscription.unsubscribe();
      }
    })
  }
  
  open() {
    if (typeof document !== "undefined") {
      this.opened = true;
      document.getElementsByTagName('html')[0].classList.add('fs-modal-open');
    }
  }
  
  close() {
    if (typeof document !== "undefined" && this.opened) {
        document.getElementsByTagName('html')[0].classList.remove('fs-modal-open');
        this.opened = false;
        this.cancelEmitter.emit();
    }
  }
  
  ok() {
    this.close();
    this.okEmitter.emit(true);
  }
}