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

{% block admin %}
<a href="#" onclick="saveTags()"><i class="fas fa-save"></i> Save</a>&nbsp;
{% endblock %}

{% block page %}
<h2><a href="{% url 'work_list' %}">Works</a> / <a href="{% url 'work_detail' document.work.pk %}">{{ document.work.name }}</a></h2>
<div id="annotation-area">
    <div style="display: flex">
        <canvas id="inline-viewer" style="width: 600px;"></canvas>
        <div style="margin: 0px 20px">
            <div>
                <div style="text-align: center;">
                  <p>Page: <span id="page_num"></span> / <span id="page_count"></span></p>
                </div>
                <button id="prev"><i class="fas fa-backward"></i></button>
                <button id="next"><i class="fas fa-forward"></i></button>
            </div>
            <div id="tag-list" style="cursor: pointer; margin-top: 20px;">
                <div id="tag-None" data-tag="None">No tag</div>
                <div id="tag-Score" data-tag="Score">Score</div>
                {% for instrument in document.work.instruments %}
                <div id="tag-{{ instrument.0 }}" data-tag="{{ instrument.0 }}">{{ instrument.1 }}</div>
                {% endfor %}
            </div>
        </div>
    </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 = "{{ document.upload.url|safe }}";

// 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 currentTags = document.getElementById('current-tags');
var selectedTag = document.getElementById('tag-None');
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);

    // 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;

  // get the page tags
  let tag = data.pageTags[num];
  if(tag) {
      selectTag(tag);
  } else {
      if (selectedTag) {
          setTag(selectedTag.dataset.tag);
      }
  }
}

/**
 * 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;
  }
  pageNum--;
  queueRenderPage(pageNum);
}
document.getElementById('prev').addEventListener('click', onPrevPage);

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

/**
 * Asynchronously downloads PDF.
 */
pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
  pdfDoc = pdfDoc_;
  document.getElementById('page_count').textContent = pdfDoc.numPages;

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

function setTag(tag) {
    data.pageTags[pageNum] = tag;
    dirty = true;
    selectTag(tag);
}

function selectTag(tag) {
    if( selectedTag ) {
        selectedTag.classList.remove('selected');
    }
    selectedTag = document.getElementById('tag-' + tag);
    if( selectedTag) {
        selectedTag.classList.add('selected');
    }
}

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

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

</script>
{% endblock %}