import mermaid from 'https://unpkg.com/mermaid@9.2.2/dist/mermaid.esm.min.mjs';
import { debounce } from '../../util/helpers.js';

export class MermaidDiagram {
  constructor(box, logBox) {
    this.box = box;
    this.container = this.box.addBox('Container');
    this.element = this.box.addBox('Element');
    this.renderBox = this.box.addBox('Render');
    this.box.addBox('Spacer').setInnerHTML(' ');
    this.logBoxPre = logBox.el.appendChild(document.createElement('pre'));
    this.inSection = 0;
  }

  static initializeAPI() {
    mermaid.mermaidAPI.initialize({
      startOnLoad: false,
      theme: 'base',
      themeVariables: {
        darkMode: true,
        primaryColor: '#2a5b6c',
        primaryTextColor: '#b6b6b6',
        // lineColor: '#349cbd',
        lineColor: '#57747d',
        signalColor: '#57747d',
        // signalColor: '#349cbd',
        noteBkgColor: '#516f77',
        noteTextColor: '#cecece',
        activationBkgColor: '#1d3f49',
        activationBorderColor: '#569595',
      },
      securityLevel: 'loose', // 'loose' so that we can use click events
      // logLevel: 'debug',
    });
  }

  async log(msg, render = true) {
    if (this.logBoxPre.textContent && !this.logBoxPre.textContent.endsWith('\n')) {
      this.logBoxPre.textContent = `${this.logBoxPre.textContent}\n`;
    }
    this.logBoxPre.textContent = `${this.logBoxPre.textContent}${msg}\n`;
    if (render) {
      await this.render();
    }
    return this;
  }

  getText() {
    return this.logBoxPre.textContent;
  }

  async render() {
    return debounce(async () => {
      const text = this.getText();
      try {
        await mermaid.mermaidAPI.render(
          this.element.getId(),
          text,
          (svgCode, bindFunctions) => {
            this.renderBox.setInnerHTML(svgCode);
            if (bindFunctions) {
              bindFunctions(this.renderBox.el);
            }
          },
        );
      } catch (e) {
        console.error(`render text:\n${text}`);
        throw e;
      }
    }, 100);
  }

  reset() {
    this.logBoxPre.textContent = '';
  }
}