{% extends "nopaque.html.j2" %}

{% set headline = ' ' %}

{% set full_width = True %}

{% block page_content %}
<div class="col s12" id="query-display">
  <div class="card">
    <div class="card-content" id="result-list" style="overflow: hidden;">
      <div class="row" style="margin-bottom: 0px;">
        <div class="col s12 m3 l3" id="results-info">
          <div class="row section">
            <h6 style="margin-top: 0px;">Infos</h6>
            <div class="divider" style="margin-bottom: 10px;"></div>
            <div class="col" id="infos">
              <p>
                Displaying
                <span id="received-match-count">
                </span> of
                <span id="match-count"></span>
                matches.
                <br>
                Matches occured in
                <span id="text-lookup-count"></span>
                corpus files:
                <br>
                <span id=text-titles></span>
              </p>
              <div class="progress hide" id="query-results-progress">
                <div class="determinate" id="query-results-determinate"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="col s12 m9 l9" id="actions-and-tools">
          <div class="row section">
            <div class="col s12 m3 l3" id="display">
              <h6 style="margin-top: 0px;">Display</h6>
              <div class="divider" style="margin-bottom: 10px;"></div>
              <div class="row">
                <div class="col s12">
                  <form id="display-options-form">
                    {{ M.render_field(display_options_form.results_per_page,
                                      material_icon='format_list_numbered') }}
                    {{ M.render_field(display_options_form.result_context,
                                      material_icon='short_text') }}
                    {{ M.render_field(display_options_form.expert_mode) }}
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Table showing the query results -->
        <div class="col s12">
          <ul class="pagination paginationTop"></ul>
          <table class="responsive-table highlight">
            <thead>
              <tr>
                <th style="width: 2%">Nr.</th>
                <th style="width: 3%">Title</th>
                <th style="width: 25%">Left context</th>
                <th style="width: 35%">Match</th>
                <th style="width: 10%">Actions</th>
                <th style="width: 25%">Right Context</th>
              </tr>
            </thead>
            <tbody class="list" id="query-results">
            </tbody>
          </table>
          <ul class="pagination paginationBottom"></ul>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Context modal used for detailed information about one match -->
<div id="context-modal" class="modal modal-fixed-footer">
  <div class="modal-content">
    <form>
      <div class="row" style="margin-bottom: 0px; margin-top: -20px;">
        <div class="col s12 m6 l6">
          <div class="section">
            <h6 style="margin-top: 0px;">Display</h6>
            <div class="divider" style="margin-bottom: 10px;"></div>
            <div class="col s12" style="margin-bottom: 10px;" id="display-inspect">
              {{ inspect_display_options_form.expert_mode_inspect.label.text }}
              <div class="switch right">
                <label>
                  {{ inspect_display_options_form.expert_mode_inspect() }}
                  <span class="lever"></span>
                </label>
              </div>
            </div>
            <div class="col s12" style="margin-bottom: 10px;" id="create-inspect">
              {{ inspect_display_options_form.highlight_sentences.label.text }}
              <div class="switch right">
                <label>
                  {{ inspect_display_options_form.highlight_sentences() }}
                  <span class="lever"></span>
                </label>
              </div>
            </div>
            <div class="col s12" style="margin-bottom: 10px;">
              Sentences around match
              <div class="input-field right" style="margin-top: -2rem;
                                                    margin-bottom: -2rem;
                                                    height: 0px;">
                <p class="range-field">
                  <input type="range"
                         id="context-sentences"
                         min="1"
                         max="10"
                         value="3" />
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>
    <div class="row section">
      <h5 style="margin-top: 0px;">Context for match:
        <span id="context-match-nr"></span></h5>
      <div class="divider" style="margin-bottom: 10px;"></div>
      <div class="col s12" >
        <div id="context-results">
        </div>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    {# <a id="inspect-download-context" class="left waves-effect waves-light btn">
      Export Single Context
      <i class="material-icons right">file_download</i>
    </a> #}
    <a href="#!" class="modal-close waves-effect waves-light red btn">Close</a>
  </div>
</div>

<script src="{{ url_for('static', filename='js/nopaque.Results.js') }}">
</script>
<script src="{{ url_for('static', filename='js/nopaque.callbacks.js') }}">
</script>
<script src="{{ url_for('static', filename='js/nopaque.InteractionElement.js') }}">
</script>
<script>
  // ###### global variables ######
  var full_result_json;
  var result_json;
  var queryResultsDeterminateElement;  // The progress bar for recieved results
  var receivedMatchCountElement;  // Nr. of loaded matches will be displayed in this element
  var textLookupCountElement  // Nr of texts the matches occured in will be shown in this element
  var textTitlesElement;  // matched text titles
  var progress;  // global progress value
  var queryResultsProgressElement;  // Div element holding the progress bar
  var expertModeSwitchElement; // Expert mode switch Element
  var matchCountElement;  // Total nr. of matches will be displayed in this element
  var interactionElements;  // Interaction elements and their parameters
  var contextModal;  // Modal to open on inspect for further match context

  // ###### Defining local scope variables
  let displayOptionsFormElement;  // Form holding the display informations
  let resultItems;  // array of built html result items row element. This is called when results are transmitted and being recieved
  let hitsPerPageInputElement;let contextPerItemElement;  // Form Element for display option
  let paginationElements;
  let inspectBtnElements;

  // ###### Initializing variables ######
  displayOptionsFormElement = document.getElementById("display-options-form");
  resultItems = [];
  queryResultsDeterminateElement = document.getElementById("query-results-determinate");
  receivedMatchCountElement = document.getElementById("received-match-count");
  textLookupCountElement = document.getElementById("text-lookup-count");
  textTitlesElement = document.getElementById("text-titles");
  queryResultsProgressElement = document.getElementById("query-results-progress");
  expertModeSwitchElement = document.getElementById("display-options-form-expert_mode");
  matchCountElement = document.getElementById("match-count");
  hitsPerPageInputElement = document.getElementById("display-options-form-results_per_page");
  contextPerItemElement = document.getElementById("display-options-form-result_context");
  paginationElements = document.getElementsByClassName("pagination");
  contextModal = document.getElementById("context-modal");

  // js list options
  displayOptionsData = ResultsList.getDisplayOptions(displayOptionsFormElement);
  resultsListOptions = {page: displayOptionsData["resultsPerPage"],
  pagination: [{
      name: "paginationTop",
      paginationClass: "paginationTop",
      innerWindow: 8,
      outerWindow: 1
    }, {
      paginationClass: "paginationBottom",
      innerWindow: 8,
      outerWindow: 1
    }],
    valueNames: ["titles", "lc", "c", "rc", {data: ["index"]}],
    item: `<span></span>`
  };

  document.addEventListener("DOMContentLoaded", () => {
    // Initialize some Modals
    contextModal = M.Modal.init(contextModal, {"dismissible": true});

    // ###### recreating chunk structure to reuse callback queryRenderResults()
    full_result_json = {{ query_result_file_content|tojson|safe }};
    result_json = {};
    result_json["chunk"] = {};
    result_json.chunk["cpos_lookup"] = full_result_json.cpos_lookup;
    result_json.chunk["cpos_ranges"] = full_result_json.cpos_ranges;
    result_json.chunk["matches"] = full_result_json.matches;
    result_json.chunk["text_lookup"] = full_result_json.text_lookup;

    // Init corpus analysis components
    data = new Data();
    resultsList = new ResultsList("result-list", resultsListOptions);
    resultsMetaData = new MetaData();
    results = new Results(data, resultsList, resultsMetaData);
    results.clearAll();  // inits some object keys and values
    // TODO: save metadate into results.metaData

    // setting some initial values for user feedback
    matchCountElement.innerText = full_result_json.match_count;

    // Initialization of interactionElemnts
    // An interactionElement is an object identifing a switch or button via
    // htmlID. Callbacks are set for these elements which will be triggered on
    // a pagination interaction by the user or if the status of the element has
    // been altered. (Like the switche has ben turned on or off).
    interactionElements = new Array();
    let expertModeInteraction = new InteractionElement("display-options-form-expert_mode");
    expertModeInteraction.setCallback("on",
                                      results.jsList.expertModeOn,
                                      results.jsList,
                                      ["query-display"])
    expertModeInteraction.setCallback("off",
                                      results.jsList.expertModeOff,
                                      results.jsList,
                                      ["query-display"])

    let activateInspectInteraction = new InteractionElement("inspect",
                                                            false);
    activateInspectInteraction.setCallback("noCheck",
                                            results.jsList.activateInspect,
                                            results.jsList);

    let changeContextInteraction = new InteractionElement("display-options-form-results_per_page",
                                                          false);
    changeContextInteraction.setCallback("noCheck",
                                        results.jsList.changeContext,
                                        results.jsList)
    interactionElements.push(expertModeInteraction, activateInspectInteraction, changeContextInteraction);

    // checks if a change for every interactionElement happens and executes
    // the callbacks accordingly
    InteractionElement.onChangeExecute(interactionElements);

    // eventListener if pagination is used to apply new context size to new page
    // and also activate inspect match if progress is 100
    // also adds more interaction buttons like add to sub results
    for (let element of paginationElements) {
      element.addEventListener("click", (event) => {
        results.jsList.pageChangeEventInteractionHandler(interactionElements);
      });
    }

    // render results in table imported parameter is true
    queryRenderResults(result_json, true);

    // live update of hits per page if hits per page value is changed
    let changeHitsPerPageBind = results.jsList.changeHitsPerPage.bind(results.jsList);
    hitsPerPageInputElement.onchange = changeHitsPerPageBind;

    // live update of lr context per item if context value is changed
    contextPerItemElement.onchange = results.jsList.changeContext;
  });
</script>
{% endblock %}