const config = {
    securityLevel:'loose',
      theme: 'base',
      startOnLoad: true,
      };
     mermaid.initialize(config);

    function editNode(config, id) {
      var merm = document.getElementById("mermaid-chart");
     // var graphid = merm.outerText.split("\n"); 

     var graphid = [];

     document.querySelectorAll('.nodeLabel').forEach((label) => {
            graphid.push(label.textContent);
     });
      
      graphid = split_nodes(graphid);

      const without_quotes = graphid[id].substring(
        graphid[id].indexOf("`") + 1,
        graphid[id].lastIndexOf("`"));

        if (without_quotes !== '') {
            graphid[id] = without_quotes;
        }
      
      (async () => {
        const { value: newvalue } = await Swal.fire({
        title: "Πληκτρολόγησε μια ή περισσότερες λέξεις (όχι πολλές!)",
        input: "text",
        inputPlaceholder: "Πληκτρολόγησέ εδώ...",
        inputAttributes: {
          "aria-label": "Πληκτρολόγησέ εδώ..."
        },
        inputValue: graphid[id],
        showCancelButton: false,
        showClass:{ popup: 'swal2-show'},
        hideClass:{ popup: 'swal2-hide'},
      })
    
      if (newvalue !== null && newvalue !== undefined && newvalue.trim() !== "") {
         graphid[id] = preparestr(newvalue);     
      } else {
        graphid[id] = '_______';
      }
    
      merm.removeAttribute('data-processed');
      merm.innerHTML = 
      `
      flowchart TD;
          T[<h1>ΑΡΘΡΑ</h1>]--o A
    A(ΜΙΚΡΕΣ ΛΕΞΕΙΣ ΠΟΥ ΜΠΑΙΝΟΥΝ ΜΠΡΟΣΤΑ <br>ΑΠΟ ΟΥΣΙΑΣΤΙΚΑ Ή ΕΠΙΘΕΤΑ)
         A==>|Διακρίνονται σε| B1
         A==>|Διακρίνονται σε| B2
         B1(ΟΡΙΣΤΙΚΑ ΑΡΘΡΑ)--o C1
         B2(AΟΡΙΣΤΑ ΑΡΘΡΑ)--o C2
         C1([ΜΑΣ ΔΕΙΧΝΟΥΝ ΚΑΤΙ ΣΥΓΚΕΚΡΙΜΕΝΟ <br> ΠΟΥ ΓΝΩΡΙΖΟΥΜΕ])---D1[` + graphid[6] + `]
         C1---D2[` + graphid[7] + `]
         C1---D3[` + graphid[8] + `]
         C2([ΜΑΣ ΔΕΙΧΝΟΥΝ ΚΑΤΙ ΓΕΝΙΚΟ <br> ΠΟΥ ΔΕΝ ΓΝΩΡΙΖΟΥΜΕ])---D4[` + graphid[9] + `]
         C2---D5[` + graphid[10] + `]
         C2---D6[` + graphid[11] + `]
         D1-.->|Παράδειγμα| E1[` + graphid[12] + `]
         D2-.->|Παράδειγμα| E2[` + graphid[13] + `]
         D3-.->|Παράδειγμα| E3[` + graphid[14]+ `]
         D4-.->|Παράδειγμα| E4[` + graphid[15] + `]
         D5-.->|Παράδειγμα| E5[` + graphid[16] + `]
         D6-.->|Παράδειγμα| E6[` + graphid[17] + `]



    click D1 "javascript:editNode(config, 6)"
    click D2 "javascript:editNode(config, 7)"
    click D3 "javascript:editNode(config, 8)"
    click D4 "javascript:editNode(config, 9)"
    click D5 "javascript:editNode(config, 10)"
    click D6 "javascript:editNode(config, 11)"
    click E1 "javascript:editNode(config, 12)"
    click E2 "javascript:editNode(config, 13)"
    click E3 "javascript:editNode(config, 14)"
    click E4 "javascript:editNode(config, 15)"
    click E5 "javascript:editNode(config, 16)"
    click E6 "javascript:editNode(config, 17)"

    style T color:#0C8193,fill:none,stroke-width:0px;
    style A color:#fff,fill:#27B7B7,stroke:#333,stroke-width:0px,font-size:9pt;
    style B1 color:#fff,fill:#2752B7,stroke-width:2px;
    style B2 color:#fff,fill:#2752B7,stroke-width:2px;
    style C1 color:black,fill:none,stroke-width:0px;
    style C2 color:black,fill:none,stroke-width:0px;
    style D1 color:#fff,fill:#131C5D,stroke-width:2px;
    style D2 color:#fff,fill:#131C5D,stroke-width:2px;
    style D3 color:#fff,fill:#131C5D,stroke-width:2px;
    style D4 color:#fff,fill:#093D51,stroke-width:2px;
    style D5 color:#fff,fill:#093D51,stroke-width:2px;
    style D6 color:#fff,fill:#093D51,stroke-width:2px;
    style E1 color:#000,fill:#74C3E2,stroke-width:2px;
    style E2 color:#000,fill:#74C3E2,stroke-width:2px;
    style E3 color:#000,fill:#74C3E2,stroke-width:2px;
    style E4 color:#000,fill:#0BA6E3,stroke-width:2px;
    style E5 color:#000,fill:#0BA6E3,stroke-width:2px;
    style E6 color:#000,fill:#0BA6E3,stroke-width:2px;
`; 

      mermaid.init(config, ".mermaid");
})();

};  

  function preparestr(s){

   var specialChars = "@\`'\"();~<>+=-[]\\/{}|";

    for (var i = 0; i < specialChars.length; i++) {
      s = s.replace(new RegExp("\\" + specialChars[i], "gi"), "");
    }

    return s.trim();

  }
              


  function split_nodes(graphid) {
    for (var i=0; i < graphid.length; i++) {
         if (i <= graphid.length-2 && (graphid[i] === '' && graphid[i+1] !== '' && graphid[i+2]==='')) {
              graphid[i+1] = '"`' + graphid[i+1] +'`"'; 
          }
    }
    graphid = graphid.filter(a => a!="");

    return graphid;
  }

 function saveDiagramAsImage() {
  var svgElement = document.querySelector('#mermaid-chart svg');

  var svgRect = svgElement.getBoundingClientRect();
  var scaleFactor = window.devicePixelRatio || 1;

  var canvas = document.createElement('canvas');
  
  canvas.width = (svgRect.width + svgRect.width * 0.4) * scaleFactor;
  canvas.height = (svgRect.height + svgRect.height * 0.4) * scaleFactor;

  var ctx = canvas.getContext('2d');

  ctx.scale(scaleFactor, scaleFactor);

  var svgData = new XMLSerializer().serializeToString(svgElement);
  var svgURL = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgData);

  var img = new Image();
  img.onload = function() {
      ctx.drawImage(img, 0, 0, svgRect.width + svgRect.width * 0.4, svgRect.height + svgRect.height * 0.4);

      var link = document.createElement('a');
      link.download = 'Αρθρα.png';
      link.href = canvas.toDataURL('image/png');
      link.click();
  };
  img.src = svgURL;
}

// button event listener 
document.getElementById('saveButton').addEventListener('click', saveDiagramAsImage);
