{% extends "scanpipe/base.html" %}
{% load static %}

{% block title %}ScanCode.io: {{ project.name }} - {{ object.name }}{% endblock %}

{% block extrahead %}
  <style>
    #resource-viewer #editor {
      min-height:730px;
      border: lightgrey 1px solid;
    }
    #resource-viewer .tag {
      height: 1.5em;
      padding-left: 0.5em;
      padding-right: 0.5em;
    }
    #resource-viewer .nav-button .button {
      height: auto;
      padding: 0 .25rem 0 .25rem;
    }
    .ace_tooltip .ace_icon {display: none;}
    {# Full screen inspired by ace/demo/scrollable-page.html #}
    body.full-screen #resource-viewer {
      height: auto;
      width: auto;
      border: 0;
      margin: 0;
      position: fixed !important;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 100;

    }
    body.full-screen #resource-viewer .message-header {
      border-radius: 0!important;
    }
    body.full-screen {
      overflow: hidden;
      /*transform breaks position fixed*/
      transform: none!important;
    }
    body {
      transform: translateZ(0);
    }
  </style>
{% endblock %}

{% block content %}
  <div class="container is-max-widescreen">
    {% include 'scanpipe/includes/navbar_header.html' %}
    <div class="mx-5 mb-2">{% include 'scanpipe/includes/messages.html' %}</div>
    {% include 'scanpipe/includes/breadcrumb_detail_view.html' with template_title="scanpipe/includes/resource_path_links.html" url_name="project_resources" %}
    {% include 'scanpipe/tabset/tabset.html' %}
  </div>
{% endblock %}

{% block scripts %}
  <script src="{% static 'ace-1.20.0.min.js' %}" crossorigin="anonymous"></script>
  <script src="{% static 'ace-1.20.0-ext-searchbox.min.js' %}" crossorigin="anonymous"></script>
  {{ detected_values|json_script:"detected_values" }}
  <script>
    let editor = ace.edit("editor", {
      mode: "ace/mode/text",
      autoScrollEditorIntoView: true,
      wrap: true,
      readOnly: true,
      showPrintMargin: false,
      highlightActiveLine: false,
      highlightGutterLine: false,
      fontSize: 15,
      foldStyle: "manual",
      fontFamily: "SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace",
    });

    function removeAllMarkers() {
      let session = editor.getSession();
      let markers = session.getMarkers();
      for (const [key, value] of Object.entries(markers)) {
        session.removeMarker(value.id);
      }
    }

    // Range(startRow, startColumn, endRow, endColumn)
    const Range = require("ace/range").Range

    function setDetectedValues(detected_data) {
      let annotations = [];
      removeAllMarkers();

      detected_data.forEach(function($el) {
        // Indexes a 0-based in ace.js
        let start_row = $el.start_line - 1;
        let start_column = 0;
        let end_row = $el.end_line - 1;
        let end_column = 10000;

        let range = new Range(start_row, start_column, end_row, end_column);
        editor.session.addMarker(range, 'ace-marker', 'line'); // "fullLine" also available

        annotations.push({
          row: start_row,
          column: 0,
          text: $el.text,
          type: "info",
          className: $el.className,
        });

      });
      editor.getSession().setAnnotations(annotations);
    }

    let scrollPositionIndex = 0;
    const selectionButtons = getAll('#detected-data-buttons button');
    const previousBtn = document.querySelector('.previous-btn');
    const nextBtn = document.querySelector('.next-btn');

    let detected_values = JSON.parse(document.querySelector("#detected_values").textContent);
    let detected_data;

    if (selectionButtons.length > 0) {
      selectionButtons.forEach(function($el) {
        $el.addEventListener('click', function() {
          removeAllMarkers();
          let active_button = document.querySelector("#detected-data-buttons button.is-info");
          if (active_button) active_button.classList.remove("is-info");

          $el.classList.add("is-info");
          let type = $el.getAttribute("data-type");
          detected_data = detected_values[type];

          if (detected_data.length) {
            scrollPositionIndex = 0;
            setDetectedValues(detected_data);
            editor.renderer.scrollToLine(detected_data[0].start_line - 1);
            previousBtn.disabled = true;
            nextBtn.disabled = detected_data.length - 1 === 0;
          } else {
            scrollPositionIndex = 0;
            editor.renderer.scrollToLine(0);
            previousBtn.disabled = true;
            nextBtn.disabled = true;
          }
        });
      });
    }

    nextBtn.addEventListener('click', function() {
      if (scrollPositionIndex >= detected_data.length - 1) return false;
      scrollPositionIndex++;
      editor.renderer.scrollToLine(detected_data[scrollPositionIndex].start_line - 1);
      nextBtn.disabled = scrollPositionIndex === detected_data.length - 1;
      previousBtn.disabled = false;
    });

    previousBtn.addEventListener('click', function() {
      if (scrollPositionIndex <= 0) return false;
      scrollPositionIndex--;
      editor.renderer.scrollToLine(detected_data[scrollPositionIndex].start_line - 1);
      previousBtn.disabled = scrollPositionIndex === 0;
      nextBtn.disabled = false;
    });

    const fullscreenBtn = document.querySelector('#toggle-fullscreen');
    fullscreenBtn.addEventListener('click', function() {
      let body = document.querySelector('body');
      let is_full_screen = body.classList.toggle("full-screen");
      editor.resize()
    });

  </script>
{% endblock %}