import { Component, OnInit, TemplateRef, ViewChild, ElementRef, Input } from '@angular/core';
//import * as mermaid from 'mermaid';
import * as $ from 'jquery';

@Component({
  selector: 'app-flowchart',
  templateUrl: './flowchart.component.html',
  styleUrls: ['./flowchart.component.css']
})
export class FlowchartComponent implements OnInit {
  @ViewChild('mermaid', { static: false }) mermaidDiv: ElementRef;
  @Input() result: string;
  graphDefinitionString = '';
  constructor() { }

  ngOnInit(): void {
  }

  // method to bind flow chart in the mermaid div
  flowChartRender(result) {
    result = 'a-->b';
    result = result.replace(/\^ /g, '\n');
    result = result.replace(/\^/g, '\n');
    result = result.replace(/\\n/g, '\n');
   // mermaid.initialize({ startOnLoad: false });
  // mermaid.initialize({ theme: 'forest' });
  // mermaid.initialize({
   // theme: 'forest'
  //  });
    let graphDefinition = '';
    graphDefinition = 'graph TB\n' + result;
    this.graphDefinitionString = graphDefinition;    
      const element: any = this.mermaidDiv.nativeElement;
      $('#mermaid').text(graphDefinition);
      element.innerHTML = '';
     //mermaid.render('graphDiv', graphDefinition, (svgCode, bindFunctions) => {
    //  element.innerHTML = svgCode;
    // });
       
  }
}
