{% extends "base.html" %}
{% block title %}Genenetwork Files Editor {% endblock %}

{% block css %}


<link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='diff2html/diff2html.min.css') }}" />
<link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='highlight/default.min.css') }}" />
<style>

</style>
{% endblock %}
{% block search %}{% endblock %}
{% block content %}
<section class="container-fluid">
  <header class="row">
    <nav class="navbar" style="background-color:#ccc">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#"><strong>GN Editor<strong></a>
        </div>
        <div style="padding-right:3.6rem">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#" hx-get="/editor/commit" hx-target="#output" hx-trigger="click" hx-swap="innerHTML"  >Commit </a></li>
            <li><a href="#" hx-get="/editor/settings" hx-target="#output" hx-trigger="click" hx-swap="innerHTML"  >Settings </a></li>
            <li><a href="https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts" target="_blank">Help</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
  <div>
    <div class="row" id="gn-editor">
      <section class="col-sm-6" id="editor" style="height:100vh">
      </section>
      <section class="col-sm-6">
        <div class="row">
          <section class="col-sm-10 col-sm-offset-1" id="output" style="height:100vh;overflow-y:scroll;padding-top:2.5rem"  id="swap">
          </section>
        </div>

      </section>
    </div>
  </div>
</section>

{% endblock %}

{% block js %}
<script src="{{ url_for('js', filename='jquery/jquery.min.js') }}" type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='diff2html/diff2html.min.js') }}"></script>
<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='jquery-ui/jquery-ui.min.js') }}"></script>

<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='htmx.min.js') }}"></script>


<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='jsdiff/diff.min.js') }}"></script>
<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='ace/ace.js') }}"></script>
<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='marked/marked.min.js') }}"></script>
<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='marked/marked-highlight.js') }}"></script>
<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='highlight/highlight.min.js') }}"></script>
<script type="text/javascript">

  document.addEventListener('DOMContentLoaded', function() {
      $('footer').hide()
      var editor_configurations = {
          selectionStyle: 'line',// "line"|"text"
          highlightActiveLine: true, // boolean
          highlightSelectedWord: true, // boolean
          readOnly: false, // boolean: true if read only
          cursorStyle: 'ace', // "ace"|"slim"|"smooth"|"wide"
          mergeUndoDeltas: true, // false|true|"always"
          behavioursEnabled: true, // boolean: true if enable custom behaviours
          wrapBehavioursEnabled: true, // boolean
          autoScrollEditorIntoView: undefined, // boolean: this is needed if editor is inside scrollable
          keyboardHandler: null,

          // renderer options
          animatedScroll: false, // boolean: true if scroll should be animated
          displayIndentGuides: false, // boolean: true if the indent should be shown. See 'showInvisibles'
          showInvisibles: false, // boolean -> displayIndentGuides: true if show the invisible tabs/spaces in indents
          showPrintMargin: true, // boolean: true if show the vertical print margin
          printMarginColumn: 80, // number: number of columns for vertical print margin
          printMargin: undefined, // boolean | number: showPrintMargin | printMarginColumn
          showGutter: true, // boolean: true if show line gutter
          fadeFoldWidgets: false, // boolean: true if the fold lines should be faded
          showFoldWidgets: true, // boolean: true if the fold lines should be shown ?
          showLineNumbers: true,
          highlightGutterLine: false, // boolean: true if the gutter line should be highlighted
          hScrollBarAlwaysVisible: false, // boolean: true if the horizontal scroll bar should be shown regardless
          vScrollBarAlwaysVisible: false, // boolean: true if the vertical scroll bar should be shown regardless
          fontSize: 16, // number | string: set the font size to this many pixels
          fontFamily: undefined, // string: set the font-family css value
          maxLines: undefined, // number: set the maximum lines possible. This will make the editor height changes
          minLines: undefined, // number: set the minimum lines possible. This will make the editor height changes
          maxPixelHeight: 0, // number -> maxLines: set the maximum height in pixel, when 'maxLines' is defined.
          scrollPastEnd: 0, // number -> !maxLines: if positive, user can scroll pass the last line and go n * editorHeight more distance
          fixedWidthGutter: false, // boolean: true if the gutter should be fixed width
          theme: "ace/theme/textmate", // theme string from ace/theme or custom?
          scrollSpeed: 2, // number: the scroll speed index
          dragDelay: 0,
          dragEnabled: true, // boolean: enable dragging
          focusTimout: 0, // number: the focus delay before focus starts.
          tooltipFollowsMouse: true, // boolean: true if the gutter tooltip should follow mouse
          // session options
          firstLineNumber: 1, // number: the line number in first line
          overwrite: false, // boolean
          newLineMode: 'auto', // "auto" | "unix" | "windows"
          useWorker: true, // boolean: true if use web worker for loading scripts
          useSoftTabs: true, // boolean: true if we want to use spaces than tabs
          tabSize: 4, // number
          wrap: true, // boolean | string | number: true/'free' means wrap instead of horizontal scroll, false/'off' means horizontal scroll instead of wrap, and number means number of column before wrap. -1 means wrap at print margin
          indentedSoftWrap: true, // boolean
          foldStyle: 'markbegin', // enum: 'manual'/'markbegin'/'markbeginend'.
          mode: 'ace/mode/markdown'

      }
      let hash = {{ hash|tojson }}
      let filePath = {{ file_path|tojson }}
      localStorage.setItem("gn_editor_sha" ,hash)
      htmx.on("#output", "commitEvent", function(event){
          htmx.ajax("POST", "/editor/commit", {target: "#output", swap:"innerHTML",values: {'msg':event.detail.payload, 'content': editor.getValue(), "hash": localStorage.getItem("gn_editor_sha"), "file_path": filePath}})
      })

      htmx.on("#output", "diffEvent", function(event){
          var fileName = "{{ file_path }}"
          var diffContent = Diff.createTwoFilesPatch(fileName,fileName, data, editor.getValue())
          var diffHtml = Diff2Html.html(diffContent, {
              drawFileList: true,
              matching: 'lines',
              outputFormat: 'line-by-line',
          });
          htmx.find("#output").innerHTML = diffHtml
      })

      htmx.on("#output", "updateEditor", function(event){
          editor.setOptions({
              ...editor_configurations,
              ...event.detail.payload
          })
          editor.renderer.updateFull();
      })
      function updatePreview(){
          const {markedHighlight} = globalThis.markedHighlight;

          let new_marked = new marked.Marked(
              markedHighlight({
                  langPrefix: 'hljs language-',
                  highlight(code, lang) {
                      const language = hljs.getLanguage(lang) ? lang : 'plaintext';
                      return hljs.highlight(code, { language }).value;
                  }}));
          new_marked.use({
              pedantic: false,
              gfm: true,
          });
          previewContent = document.querySelector("#output");
          var markdownContent = editor.getValue();
          var htmlContent = new_marked.parse(markdownContent)    //work on error handling for invalid markdown
          previewContent.innerHTML = htmlContent;
      }
      var editor = ace.edit("editor");
      editor.setOptions(editor_configurations);
      editor.container.style.resize = "horizontal";
      editor.getSession().on("change", function(e){
          updatePreview()
      })
      var data = {{ content|tojson }}
      editor.setValue(data, -1);
  });


</script>
{% endblock %}