{% extends 'blog/partials/base.html' %}
{% load static %}
{% load escape %}
{% block content %}
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.40.0/min/vs/editor/editor.main.min.css"
/>
<h1>Editing Post: {{ post.title }}</h1>
<div id="post-actions-bar" class="mtsbitem" style="width: 730px">
  <a class="pa-btn" href="javascript:toggleArea('editor');">Code</a>
  <a class="pa-btn" href="javascript:toggleArea('preview');">Preview</a>
  <a class="pa-btn" href="javascript:addImage('block');">Image (Block)</a>
  <a class="pa-btn" href="javascript:addImage('inline');">Image (Inline)</a>
</div>
<div
  id="edit-area"
  style="
    border-bottom: solid 1px #311b4f;
    border-left: solid 1px #311b4f;
    border-right: solid 1px #311b4f;
  "
>
  <div id="editor" style="width: 730px;"></div>
  <div id="article-body" style="width: 730px;">
    <div id="preview" style="padding: 1px 10px;"></div>
  </div>
</div>
<div style="padding: 20px 0">
  <button type="submit" class="button button-special" onclick="savePost()">
    Save
  </button>
</div>
{% endblock content %} {% block scripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.40.0/min/vs/loader.js"></script>
<script src="{% static 'js/editor-theme.js' %}"></script>
<script>
  const postBody = `{{ post.body|escape|safe }}`;
  var editorInstance;

  // default loads
  $("#editor").css("min-height", $(window).height() + "px");
  toggleArea("preview");
  updatePreview(postBody);

  function toggleArea(areaName) {
    areas = ["editor", "preview"];
    const currentArea = areas.find((area) => {
      return $(`#${area}`).is(":visible");
    });
    if (currentArea == areaName) {
      return;
    }

    $(`#${areaName}`).toggle();
    $(`#${areaName}`).promise().done(function() {
      if ($(`#${areaName}`).is(":visible")) {
        areas.forEach((area) => {
          if (area != areaName) {
            $(`#${area}`).hide();
          }
        });
      }
    });
  }

  function updatePreview(HTMLContent) {
    $("#preview").html(HTMLContent);
  }

  function savePost() {

    const editor = monaco.editor.getModels()[0];
    const body = editor.getValue();
    const formURL = "{% url 'blog-admin:edit-post' post.slug %}";
    const csrfToken = "{{ csrf_token }}";

    const form = document.createElement("form");
    form.setAttribute("action", formURL);
    form.setAttribute("method", "post");

    const csrfTokenInput = document.createElement("input");
    csrfTokenInput.setAttribute("type", "hidden");
    csrfTokenInput.setAttribute("name", "csrfmiddlewaretoken");
    csrfTokenInput.setAttribute("value", csrfToken);

    const bodyInput = document.createElement("textarea");
    bodyInput.setAttribute("name", "body");
    bodyInput.setAttribute("id", "body");
    bodyInput.innerHTML = body;

    form.appendChild(csrfTokenInput);
    form.appendChild(bodyInput);

    document.body.appendChild(form);
    form.submit();
  }

  function addImage(size) {
    const fileInput = document.createElement("input");
    fileInput.setAttribute("type", "file");
    fileInput.setAttribute("accept", "image/*");
    fileInput.click();

    fileInput.addEventListener("change", function () {
      const file = fileInput.files[0];
      const formURL = "{% url 'ignis:upload_image' %}";
      const csrfToken = "{{ csrf_token }}";

      const formData = new FormData();
      formData.append("image", file);
      formData.append("id", "{{ post.id }}");
      formData.append("csrfmiddlewaretoken", csrfToken);

      $.ajax({
        url: formURL,
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function (data) {
          const imageURL = data.url;
          const imageHTML = `<img src="${imageURL}" class="${size}">`;
          const editor = monaco.editor.getModels()[0];
          if (editorInstance) {
            const selection = editorInstance.getSelection();
            const id = {
              major: 1,
              minor: 1,
            };
            const text = imageHTML;
            const op = {
              identifier: id,
              range: {
                startLineNumber: selection?.selectionStartLineNumber || 1,
                startColumn: selection?.selectionStartColumn || 1,
                endLineNumber: selection?.positionLineNumber || 1,
                endColumn: selection?.positionColumn || 1,
              },
              text: text,
              forceMoveMarkers: true,
            };
            editorInstance.executeEdits("editor", [op]);
          }
        }, // success
        error: function (data) {
          console.log("error");
          console.log(data);
        }, // error
      });
    });
  }

  require.config({
    paths: {
      vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.40.0/min/vs",
    },
  });
  require(["vs/editor/editor.main"], function () {
    var editor = monaco.editor.create(document.getElementById("editor"), {
      language: "html",
      automaticLayout: true,
      autoClosingBrackets: "languageDefined",
      autoClosingQuotes: "always",
      autoIndent: true,
      autoSurround: "languageDefined",
      contextmenu: true,
      cursorBlinking: "blink",
      cursorSmoothCaretAnimation: "on",
      find: {
        autoFindInSelection: "never",
        seedSearchStringFromSelection: true,
        cursorMoveOnType: true,
        loop: true,
      },
      minimap: {
        enabled: false,
      },
      padding: { top: 12, right: 0, bottom: 12, left: 0 },
      overviewRulerLanes: 0,
      overviewRulerBorder: false,
      suggest: {
        filterGraceful: false,
        enabled: true,
        snippetsPreventQuickSuggestions: true,
        localityBonus: true,
        showWords: true,
        showIcons: true,
      },
      wordWrap: "on",
      wrappingIndent: "same",
      value: postBody,
    });

    editor.onDidChangeModelContent(function (e) {
      updatePreview(editor.getValue());
    });

    editorInstance = editor;

    monaco.editor.defineTheme("NightOwl", themeData);
    monaco.editor.setTheme("NightOwl");
  });
</script>
{% endblock scripts %}