{% extends "base.html" %}
{% block title %}Genenetwork Files Editor{% endblock %}
{% block css %}
    <style>
  #diffBtn {
      cursor:pointer
  }
    </style>
    <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') }}" />
{% 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">Save</a>
                            </li>
                            <li>
                                <a hx-trigger="click" id="diffBtn"  hx-swap="innerHTML">Show Diff</a>
                            </li>
                            <li>
                                <a href="#"
                                   hx-get="/editor/settings"
                                   hx-target="#output"
                                   hx-trigger="click"
                                   hx-swap="innerHTML">Settings</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>
        <div>
            <div class="row" id="gn-editor">
                <section class="col-sm-6" id="editor" style="height:100vh">
                    <textarea name="ckcontent" id="ckcontent" style='display:none'>
        </textarea>
                </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 language="javascript"
            type="text/javascript"
            src="{{ url_for('js', filename='ckeditor/ckeditor.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 }}
      let fileExt =   (filePath.substring(filePath.lastIndexOf('.')+1, filePath.length) || "md").toLowerCase();
      let data = {{ content|tojson }}

	localStorage.setItem("gn_editor_sha" ,hash)
	htmx.on("#output", "updateDataEvent", function(event){
	  data = editor.getValue()
	})
      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){
          if (fileExt != 'rtf'){
              editor.setOptions({
                  ...editor_configurations,
                  ...event.detail.payload
              })
              editor.renderer.updateFull();
          }

      })

      htmx.on("#diffBtn","click",function(event){
          //dispatch your event here
	  htmx.find("#output").dispatchEvent(
          new CustomEvent("diffEvent", {
              bubbles: true,
              detail: {},
          }),
      );
      })
      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;
      }

      if (fileExt == "rtf"){
          var editor = CKEDITOR.replace('ckcontent',    {
              height: '100vh',
          });
          editor.setData(data)
          editor.getValue = editor.getData
      }
      else {
          var editor = ace.edit("editor");
          editor.setOptions(editor_configurations);
          editor.container.style.resize = "horizontal";
          editor.getSession().on("change", function(e){
              updatePreview()
          })
          editor.setValue(data, -1);
      }

  });


    </script>
{% endblock %}