import {
  Component,
  Input,
  OnChanges,
  SimpleChanges,
  OnInit,
} from "@angular/core";
import { Modeler, Viewer } from "./bpmn-js";
import { Observable } from "rxjs";

@Component({
  selector: "nm-bpmnjs-viewer",
  templateUrl: "./bpmnjs-viewer.component.html",
  styleUrls: ["./bpmnjs-viewer.component.scss"],
  providers: [],
})
export class BpmnjsViewerComponent implements OnChanges, OnInit {
  @Input()
  public xml: string;

  private viewer;
  ngOnChanges(changes: SimpleChanges): void {
    if (this.viewer && this.xml) {
      this.importXml();
    }
  }

  ngOnInit(): void {
    this.buildViewer();
    if (this.xml) {
      this.importXml();
    }
  }

  importXml() {
    this.viewer.importXML(this.xml, (err) => {
      if (!err) {
        this.viewer.get("canvas").zoom("fit-viewport");
      } else {
        console.error("something went wrong:", err);
      }
    });
  }

  private buildViewer() {
    this.viewer = new Viewer({
      width: "100%",
      height: "600px",
      container: " .bpmn-canvas",
      additionalModules: [],
    });
  }
}