
import {
  Component,
  OnInit,
  ViewChild,
  ViewContainerRef,
  Input,
  Output,
  EventEmitter
} from "@angular/core";
import {
  BaseMagicOverlayContainer,
  MagicModalInterface
} from "@magic-xpa/angular";
import { ComponentFactoryResolver } from "@angular/core";

@Component({
  selector: "app-custom-overlay",
  templateUrl: './custom-overlay.html',
  styleUrls: ["./custom-overlay.scss"]

})
export class OverlayContainer extends BaseMagicOverlayContainer
  implements OnInit {
  Formname: string = "";
  showtitle: boolean = true;
  formwidth: string = "";
  /**
   * content will be displayed in this placeholder
   */
  @ViewChild("overlaybody", { read: ViewContainerRef, static: true })
  overlaybodyViewContainerRef;
  /**
   *
   */
  @Input() ModalComp = null;
  /**
   *
   */
  @Input() ModalCompParameters: any = {};
  /**
   *
   */
  @Output() onClose = new EventEmitter();

  /**
   *
   */
  private componentRef = null;

  /**
   *
   * @param componentFactoryResolver
   */
  constructor(private componentFactoryResolver: ComponentFactoryResolver) {
    super();
  }

  /**
   *
   */
 ngOnInit() {
    const factory = this.componentFactoryResolver.resolveComponentFactory(
      this.ModalComp
    );
    this.componentRef = this.overlaybodyViewContainerRef.createComponent(
      factory
    );
    let magicModalInterface: MagicModalInterface = this.componentRef
      .instance as MagicModalInterface;
    this.Formname = magicModalInterface.FormName();
    this.showtitle = magicModalInterface.ShowTitleBar();
    this.formwidth = magicModalInterface.Width();

    Object.assign(this.componentRef.instance, this.ModalCompParameters);

  }

  getStyleModal() {
    let styles:any = [];
    styles["background-color"] = "#000000";
    styles["opacity"] = 0.7;
    return styles;
  }

  getStyle() {
    let styles:any = [];
    let modal: MagicModalInterface = (
      this.componentRef.instance
    );


    styles["width"] = modal.Width()=='0'?'100%':modal.Width();
    styles["height"] = modal.Height()=='0'?'100%':modal.Height();// (Number(modal.Height().replace('px', '')) + 150) + 'px';

    styles["top"] = modal.X() + "vh";
    styles["left"] = modal.Y() + "vw";


    // styles["width"] = "100%";
    // styles["height"] = "100%";

    // styles["top"] = "0";
    // styles["left"] = "0";



    if (this.showtitle == false) {

    }
    return styles;
  }

  OnClose() {
    this.onClose.emit();
  }
}

