{% extends "interface/project_base.html" %}
{% load polyphonic %}

{% block admin %}
<a href="#" onclick="saveTags()" class="button is-link">
  {% icon "save" %}
  <span>Save</span>
</a>
<a href="{% url 'work_detail' collection=collection.pk pk=object.work_id %}" class="button is-link is-light">
  {% icon "backspace" %}
  <span>Cancel</span>
</a>
{% endblock %}

{% block media %}
<style>
  .tag-grid {
    display: flex;
  }
  .grid-column {
    margin-left: 1em;
    margin-right: 1em;
  }
  .grid-page {
    height: 25px;
    margin-bottom: 5px;
    border: 1px solid #999;
    border-radius: 5px;
    text-align: center;
    width: 50px;
    cursor: pointer;
  }
  .grid-page.is-active {
    background-color: var(--primary);
    color: white;
  }
  .grid-tag {
    border: 2px solid var(--primary);
    background-color: rgba(240, 240, 240, 0.5);
    border-radius: 5px;
    padding-left: 1em;
    padding-right: 1em;
    margin-bottom: 5px;
    min-width: 200px;
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: start;
  }
  #tag-area {
    min-width: 220px;
  }
  .instrument {
    display: list-item !important;
  }
  .instrument:hover {
    background-color: var(--primary);
    color: white;
  }
</style>
{% endblock %}

{% block page %}
<h3 class="subtitle"><a href="{% url 'work_detail' collection.pk document.work_id %}">{{ document.work.name }}</a></h3>
<div id="annotation-area" class="columns is-centered">
  <div class="column is-narrow">
  <div class="columns">
    <div class="column is-narrow">
      <button class="button is-small is-primary" id="prev">&lt;</button>
    </div>
    <div class="column">
      <span id="page-num">-</span> / <span id="page-count">-</span>
    </div>
    <div class="column is-narrow">
      <button class="button is-small is-primary" id="next">&gt;</button>
    </div>
  </div>
  <ul id="unassigned-area">
  {% for tag, inst in document.work.music_tags %}
    <li>
      <span class="is-clickable" onclick="assignInstrument('{{tag}}', this)")>{{ inst }}</span>
      &nbsp;
      <span class="is-clickable" onclick="addNumberedInstrument('{{tag}}', this)">...</span>
    </li>
  {% endfor %}
  </ul>
  <a onclick="document.getElementById('add-modal').classList.add('is-active')">Add Tag</a>
  </div>
  <div class="column is-narrow">
    <div class="has-text-centered">
      <div class="box" style="display: inline-block;">
        <canvas id="inline-viewer" style="width: 500px;"></canvas>
      </div>
    </div>
  </div>
  <div class="column is-narrow">

    <div class="tag-grid">
      <div class="grid-column" id="page-list">
      </div>
      <div class="grid-column" id="tag-area">
      </div>
    </div>
    <button class="button is-primary" style="width: 100%" onclick="expandEntries()">Expand</button>

  </div>
</div>

<div class="modal" id="add-modal">
  <div class="modal-background" onclick="closeAddModal()"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Add Instrument</p>
      <button class="delete" aria-label="close" onclick="closeAddModal()"></button>
    </header>
    <section class="modal-card-body">
      <div class="field has-addons">
        <span class="control">
          <input type="text" class="input" list="instrument-list" id="add-instrument-name"/>
          <datalist id="instrument-list">
            {% for inst in json_data.instruments.values %}
            <option value="{{inst}}"/>
            {% endfor %}
          </datalist>
        </span>
        <span class="control">
          <input type="number" class="input" max="4" min="1" size="3" id="add-instrument-variant"/>
        </span>
        <span class="control">
          <button class="button is-primary" onclick="addInstrument();">Add</button>
        </span>
      </div>
    </section>
  </div>
</div>

<p>{{ document.upload.name }}</p>

{% endblock %}

{% block scripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.7.570/pdf.min.js"
  integrity="sha512-g4FwCPWM/fZB1Eie86ZwKjOP+yBIxSBM/b2gQAiSVqCgkyvZ0XxYPDEcN2qqaKKEvK6a05+IPL1raO96RrhYDQ=="
  crossorigin="anonymous"></script>
{{ json_data|json_script:"data" }}
<script type="text/javascript">
  let url = "{% url 'document_download' collection.pk document.pk %}";

  // Loaded via <script> tag, create shortcut to access PDF.js exports.
  let pdfjsLib = window['pdfjs-dist/build/pdf'];

  // The workerSrc property shall be specified.
  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.7.570/pdf.worker.min.js';

  // get current page tags
  let data = JSON.parse(document.getElementById('data').textContent);
  let tagArea = document.getElementById('tag-area');
  var dirty = false;

  //document.getElementById('tag-list').onclick = (e) => setTag(e.target.dataset.tag);

  var pdfDoc = null,
    pageNum = 1,
    pageRendering = false,
    pageNumPending = null,
    scale = 1,
    canvas = document.getElementById('inline-viewer'),
    ctx = canvas.getContext('2d');

  /**
   * Get page info from document, resize canvas accordingly, and render page.
   * @param num Page number.
   */
  function renderPage(num) {
    pageRendering = true;
    // Using promise to fetch the page
    pdfDoc.getPage(num).then(function (page) {
      var viewport = page.getViewport({ scale: scale });
      canvas.height = viewport.height;
      canvas.width = viewport.width;

      // Render PDF page into canvas context
      var renderContext = {
        canvasContext: ctx,
        viewport: viewport
      };
      var renderTask = page.render(renderContext);

      try {
        document.getElementById('grid-page-' + pageNum).classList.remove('is-active');
      } catch(e) {}

      pageNum = num;
      document.getElementById('grid-page-' + pageNum).classList.add('is-active');

      // Wait for rendering to finish
      renderTask.promise.then(function () {
        pageRendering = false;
        if (pageNumPending !== null) {
          // New page rendering is pending
          renderPage(pageNumPending);
          pageNumPending = null;
        }
      });
    });

    // Update page counters
    document.getElementById('page-num').textContent = num;

  }

  /**
   * If another page rendering in progress, waits until the rendering is
   * finised. Otherwise, executes rendering immediately.
   */
  function queueRenderPage(num) {
    if (pageRendering) {
      pageNumPending = num;
    } else {
      renderPage(num);
    }
  }

  /**
   * Displays previous page.
   */
  function onPrevPage() {
    if (pageNum <= 1) {
      return;
    }
    queueRenderPage(pageNum-1);
  }
  document.getElementById('prev').addEventListener('click', onPrevPage);

  /**
   * Displays next page.
   */
  function onNextPage() {
    if (pageNum >= pdfDoc.numPages) {
      return;
    }
    queueRenderPage(pageNum+1);
  }
  document.getElementById('next').addEventListener('click', onNextPage);

  /**
   * Asynchronously downloads PDF.
   */
  pdfjsLib.getDocument(url).promise.then(function (pdfDoc_) {
    pdfDoc = pdfDoc_;

    const pageList = document.getElementById('page-list');
    pageList.innerHTML = '';
    for (var i=0; i<pdfDoc.numPages; i++) {
      let page = i+1;
      let el = document.createElement('div');
      el.className = 'grid-page';
      el.id = 'grid-page-' + page;
      el.innerHTML = page;
      el.addEventListener('click', (evt) => {
        queueRenderPage(page);
      });
      pageList.appendChild(el);
    }

    document.getElementById('page-count').textContent = pdfDoc.numPages;

    // Initial/first page rendering
    renderPage(pageNum);

    tagArea.innerHTML = '';
    for (let pageTag of data.pageTags) {
      addTag(pageTag[0], pageTag[1], pageTag[2]);
    }
    dirty = false;
  });

  function closeAddModal() {
    document.getElementById('add-modal').classList.remove('is-active');
    document.getElementById('add-instrument-name').value = "";
    document.getElementById('add-instrument-variant').value = "";
  }
  
  function addNumberedInstrument(tag, e) {
    let modal = document.getElementById('add-modal');

    document.getElementById("add-instrument-name").value = data.instruments[tag];
    document.getElementById("add-instrument-variant").value = 1;
    document.getElementById("add-instrument-variant").focus();

    modal.classList.add('is-active');
  }

  function addInstrument() {
    let name = document.getElementById('add-instrument-name');
    let variant = document.getElementById('add-instrument-variant');

    let inst_name = name.value;
    var tag = null;
    for (let key in data.instruments) {
      if (data.instruments[key] == inst_name) {
        tag = key;
        break;
      }
    }

    if (!tag) {
      alert("Unknown tag: " + name);
      return;
    }

    if (variant.value) {
      tag += "-" + variant.value;
    }

    variant.value = '';
    name.value = '';

    let li = document.createElement('li');
    li.classList.add("is-clickable");
    li.addEventListener('click', () => assignInstrument(tag, li));
    li.innerHTML = get_instrument(tag);
    document.getElementById('unassigned-area').appendChild(li);
    
    addTag(tag, pageNum, pageNum);
    closeAddModal();
  }

  function assignInstrument(tag, el) {
    addTag(tag, pageNum, pageNum);
    //el.remove();
  }

  function addTag(tag, start, end) {
    console.log("addTag", tag, start, end);
    const el = document.createElement('div');
    el.className = 'grid-tag';
    el.dataset.tag = tag;
    el.dataset.start = start;
    el.dataset.end = end;

    let setStart = document.createElement('span');
    setStart.className = "icon is-action";
    setStart.innerHTML = '<span class="material-symbols-outlined" title="Set start page">vertical_align_top</span>';
    setStart.addEventListener('click', () => setTagStart(el));
    el.appendChild(setStart);
    

    let label = document.createElement('span');

    let name = document.createElement('b');
    name.innerHTML = get_instrument(tag);
    label.appendChild(name);
    el.appendChild(label);
    
    let del = document.createElement('span');
    del.className = "icon is-action";
    del.innerHTML = '<span class="material-symbols-outlined" title="Remove this tag">delete</span>';
    del.addEventListener('click', () => {
      el.remove();
      dirty=true;
    });
    el.appendChild(del)
    
    let setEnd = document.createElement('span');
    setEnd.className = "icon is-action";
    setEnd.innerHTML = '<span class="material-symbols-outlined" title="Set end page">vertical_align_bottom</span>';
    setEnd.addEventListener('click', () => setTagEnd(el));
    el.appendChild(setEnd);

    updateTag(el);
    tagArea.appendChild(el);
  }

  function updateTag(tag) {
    let start = tag.dataset.start;
    let end = tag.dataset.end;
    let span = end-start+1;
    let height = span * 25 + (span-1) * 5;
    let top = (start-1) * 30;
    
    tag.style.height = height + 'px';
    tag.style.marginTop = top + 'px';
    dirty = true;
  }

  function setTagStart(el) {
    if (pageNum > el.dataset.end) {
      alert("Select the first page and click extend");
      return;
    }
    el.dataset.start = pageNum;
    updateTag(el);
  }
  
  function setTagEnd(el) {
    if (pageNum < el.dataset.start) {
      alert("Select the last page and click extend");
      return;
    }
    el.dataset.end = pageNum;
    updateTag(el);
  }

  function expandEntries() {
    const entries = Array.from(tagArea.children);
    entries.sort((a, b) => a.dataset.start-b.dataset.start);
    const c = entries.length;
    for (let i=0; i<c-1; i++) {
      entries[i].dataset.end = entries[i+1].dataset.start - 1;
      updateTag(entries[i]);

    }
    entries[c-1].dataset.end = pdfDoc.numPages;
    updateTag(entries[c-1]);
  }

  function saveTags() {
    const pageTags = [];
    for (let pageTag of tagArea.children ) {
      let start = pageTag.dataset.start;
      let end = pageTag.dataset.end;
      if (start == 1 && end == pdfDoc.numPages) {
        start = null;
        end = null;
      }
      pageTags.push([pageTag.dataset.tag, start, end])
    }

    console.log(pageTags);
    fetch("", {
      method: "POST",
      headers: { "Content-Type": "application/json", "X-CSRFToken": "{{ csrf_token }}" },
      body: JSON.stringify(pageTags)
    }
    ).then((response) => {
      if (response.ok) {
        window.location = "{% url 'work_detail' collection.pk document.work_id %}"
      } else {
        alert("Failed: " + response.statusText)
      }
    });
    dirty = false;
  }

  function get_instrument(s) {
    let parts = s.split('-');
    let instrument = data.instruments[parts[0]];
    if (parts.length == 2) {
      return instrument + " " + parts[1];
    }
    return instrument;
  }

  function checkSaved(e) {
    if (dirty) {
      e.preventDefault();
    }
  }
  window.addEventListener('beforeunload', checkSaved);

</script>
{% endblock %}