{% extends 'blog/partials/base.html' %} {% block content %}
{% load static %}

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />
<div class="main">
  <div style="position: relative;">
    <h2>Editing Post: {{ post.title }}</h2>
    <br>
    <div id="math-formula-block" style="
    position: absolute;
    top: 95px;
    left: 185px;
    width: 320px;
    background: #121212;
    padding: 10px 20px 15px 20px;
    z-index: 3;
    display: none;
    ">
      <textarea id="math_formula" placeholder="Type MathJax Formula to Insert..." style="width: 300px; display: block; margin: 0px 0px 20px 0px;" rows="5"></textarea>
      <input type="radio" name="math_formula_type" value="inline" checked /> <span style="margin-right: 10px; position: relative; top: -2.5px;">Inline</span>
      <input type="radio" name="math_formula_type" value="block" style="margin-left: 10px;"> <span style="margin-right: 10px; position: relative; top: -2.5px;">Block</span>
      <button id="math_formula_insert" style="float: right; margin-top: -5px;" class="button button-special">Insert</button>
      <button id="math_formula_cancel" style="float: right; margin-top: -5px; margin-right: 10px;" class="button">Cancel</button>
    </div>
    <form action="{% url 'blog-admin:edit-post' post.slug %}" method="post" enctype="multipart/form-data">
      {% csrf_token %}

      <div class="form-group">
        <div id="toolbar-container">
          <span class="ql-formats">
            <button class="ql-header" value="1"></button>
            <button class="ql-header" value="2"></button>
          </span>
          <span class="ql-formats">
            <button class="ql-bold"></button>
            <button class="ql-italic"></button>
            <button class="ql-underline"></button>
            <button class="ql-strike"></button>
          </span>
          <span class="ql-formats">
            <button class="ql-blockquote"></button>
            <button class="ql-code-block"></button>
          </span>
          <span class="ql-formats">
            <button class="ql-script" value="sub"></button>
            <button class="ql-script" value="super"></button>
          </span>

          <span class="ql-formats">
            <button class="ql-list" value="ordered"></button>
            <button class="ql-list" value="bullet"></button>
          </span>
          <span class="ql-formats">
            <select class="ql-align"></select>
          </span>
          <span class="ql-formats">
            <button class="ql-link"></button>
            <button class="ql-image"></button>
            <button class="ql-formula"></button>
          </span>
          <span class="ql-formats">
            <button class="ql-clean"></button>
          </span>
        </div>
        <div id="editor-container" style="width: 730px;"></div>
      </div>
      <div class="form-group" style="display: none;">
          <textarea name="body" id="body">{{ post.body }}</textarea>
      </div>
      <br>
      <div class="form-group">
          <button type="submit" class="button button-special">Save</button>
      </div>
    </form>
  </div>
</div>
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
<script>
  const Delta = Quill.import("delta");
  function showFormulaInsert(quill) {
    var formulaInsert = document.getElementById("math_formula_insert");
    var formulaCancel = document.getElementById("math_formula_cancel");
    var formulaInput = document.getElementById("math_formula");
    var formulaContainer = document.getElementById("math-formula-block");
    formulaContainer.style.display = "block";
    formulaInsert.onclick = function () {
      var formula = formulaInput.value;
      var formulaType = document.querySelector('input[name="math_formula_type"]:checked').value;
      if (formulaType == "inline") {
        quill.insertText(quill.getSelection().index, " $" + formula + "$ ");
      } else {
        quill.insertText(quill.getSelection().index, " $$" + formula + "$$ ");
      }
      formulaContainer.style.display = "none";
    }
    formulaCancel.onclick = function () {
      formulaContainer.style.display = "none";
    }
  }

  var quill = new Quill("#editor-container", {
    modules: {
      toolbar: {
        container: "#toolbar-container",
        handlers: {
          formula: function () {
            showFormulaInsert(quill);
          },
          image: function () {
            // open image upload dialog
            let fileInput = this.container.querySelector('input.ql-image[type=file]');
            if (fileInput == null) {
              fileInput = document.createElement('input');
              fileInput.setAttribute('type', 'file');
              fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
              fileInput.classList.add('ql-image');
              fileInput.addEventListener('change', () => {
                if (fileInput.files != null && fileInput.files[0] != null) {
                  let range = this.quill.getSelection(true);
                  const url = "/ignis/upload";
                  const formData = new FormData();
                  formData.append("image", fileInput.files[0]);
                  formData.append("id", {{ post.id }});
                  // append csrf token in header
                  const headers = new Headers();
                  headers.append("X-CSRFToken", "{{ csrf_token }}");

                  fetch(url, {
                    method: "POST",
                    headers: headers,
                    body: formData,
                  }).then((response) => response.json()).then((result) => {
                    this.quill.updateContents(new Delta()
                      .retain(range.index)
                      .delete(range.length)
                      .insert({ image: result.url })
                    , Quill.sources.USER);
                    fileInput.value = "";
                  }).catch((error) => {
                    console.error("Error:", error);
                  });
                }
              });
              this.container.appendChild(fileInput);
            }
            fileInput.click();
          },
        },
      },
    },
    placeholder: "Compose an epic...",
    theme: "snow",
  });

  // update body on text change
  quill.on("text-change", function (delta, oldDelta, source) {
      document.getElementById("body").value = quill.root.innerHTML;
  });

  try {
    const value = document.getElementById("body").value;
    const newValue = value.replace(/<p><br><\/p>/g, "");
    const delta = quill.clipboard.convert(value);
      quill.setContents(delta, "silent");
  } catch (e) {
      console.log(e);
  }
</script>
{% endblock %}