import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef, AfterViewInit } from '@angular/core';
import { RdComponent } from '../../base/rdComponent';
import { PopUpOptions } from '../../base/rdPopUp';

@Component({
  selector: 'rd-modal-instance',
  template: `
    <a #dataToggler hidden data-toggle="modal" data-target="#modal-default"></a>

    <div id="modal-default" class="modal fade" role="dialog" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog" [ngClass]="size" [ngStyle]="{'max-width':options.widthPercent ? options.widthPercent + '%' : ''}">
        <div class="modal-content">
          <div #content></div>
        </div>
      </div>
    </div>

    <a #dataTogglerStatic hidden data-toggle="modal" data-target="#modal-static" data-backdrop="static" data-keyboard="false"></a>

    <div id="modal-static" class="modal fade" role="dialog" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog" [ngClass]="size" [ngStyle]="{'max-width':options.widthPercent ? options.widthPercent + '%' : ''}">
        <div class="modal-content">
          <div #contentStatic></div>
        </div>
      </div>
    </div>
  `
})
export class ModalInstance extends RdComponent implements AfterViewInit {
  @ViewChild('content', { read: ViewContainerRef }) view: ViewContainerRef;
  @ViewChild('contentStatic', { read: ViewContainerRef }) viewStatic: ViewContainerRef;
  @ViewChild('dataToggler') dataToggler;
  @ViewChild('dataTogglerStatic') dataTogglerStatic;

  private contentReferance;
  public options = new PopUpOptions();
  public size;

  constructor(private loader: ComponentFactoryResolver) {
    super();
  }

  ngAfterViewInit() {
    this.jQuery('#modal-default').on('hidden.bs.modal', function (e) {
      if (this.contentReferance) this.contentReferance.destroy();
    }.bind(this));
  }

  open(type, options: PopUpOptions, callback) {
    if (this.contentReferance) this.contentReferance.destroy();
    this.options = options;
    switch (this.options.size) {
      case 'small': this.size = 'modal-sm'; break;
      case 'medium': this.size = 'modal-md'; break;
      case 'large': this.size = 'modal-lg'; break;
      case 'full': this.size = 'modal-full'; break;
      default: this.size = 'modal-md'; break;
    }

    let factory = this.loader.resolveComponentFactory(type);
    let ref = this.options.closeOnOutsideClick ? this.view.createComponent(factory) : this.viewStatic.createComponent(factory);

    this.contentReferance = ref;
    callback(ref.instance);
    ref.changeDetectorRef.detectChanges();
    if (this.options.closeOnOutsideClick) this.dataToggler.nativeElement.click();
    else this.dataTogglerStatic.nativeElement.click();
  }

  dismiss() {
    if (this.options.closeOnOutsideClick) this.dataToggler.nativeElement.click();
    else this.dataTogglerStatic.nativeElement.click();
  }
}