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

{% set headline = ' ' %}

{% set full_width = True %}
{% set imported = True %}

{% block page_content %}

<div class="col s12">
  <div class="card">
    <div class="card-content" style="padding-top: 5px;
                             padding-bottom: 0px;">
      <!-- Query form -->
      <div class="row">
      <form id="query-form">
          <div class="col s12 m10">
            <div class="input-field">
              <i class="material-icons prefix">search</i>
              <input disabled value="{{ query_metadata.query|escape }}" id="disabled" type="text" class="validate">
          <label for="disabled">Query</label>
            </div>
          </div>
          <div class="col s12 m2 right-align">
            <br class="hide-on-small-only">
          </div>
      </form>
    </div>
    </div>
  </div>
</div>

<!-- entire results div/card -->
<div class="col s12" id="query-display">
  <div class="card">
    <div class="card-content" id="result-list" style="overflow: hidden;">
      <div class="row">
        {% include 'interactions/infos.html.j2' %}
        {% include 'interactions/display.html.j2' %}
        {% include 'interactions/analysis.html.j2' %}
        {% include 'interactions/cite.html.j2' %}
      </div>
      {% include 'tables/query_results.html.j2' %}
    </div>
  </div>
</div>

<!-- Scroll to top element -->
{% include 'interactions/scroll_to_top.html.j2' %}

<!-- Modals -->
{% include 'modals/show_metadata.html.j2' %}
{% include 'modals/show_text_details.html.j2' %}
{% include 'modals/context_modal.html.j2' %}


<script type="module">
/**
 * First Phase:
 * document content is loaded and scripts are being imported and executed
 */
 import {
   CorpusAnalysisClient,
   CorpusAnalysisDisplay,
   SocketEventListener,
   ListenerCallback,
 } from '../../static/js/modules/nopaque.CorpusAnalysisClient.js';
 import {
   recieveSession,
   recieveQueryStatus,
   recieveQueryData,
 } from '../../static/js/modules/nopaque.listenerFunctions.js';
 import {
   querySetup,
   queryRenderResults,
 } from '../../static/js/modules/nopaque.listenerCallbacks.js'
 import {
   Results,
   Data,
   MetaData,
 } from '../../static/js/nopaque.Results.js';
 import {
   ResultsList,
 } from '../../static/js/nopaque.lists.js';
 import {
   scrollToTop,
 } from '../../static/js/modules/nopaque.scrollToTop.js';

/**
 * Second Phase:
 * Asynchronus and event driven code
 */
document.addEventListener("DOMContentLoaded", () => {
  // Initialize the CorpusAnalysisClient with dynamicMode as false
  const client = new CorpusAnalysisClient({'logging': true,
                                           'dynamicMode': false});
  console.info("CorpusAnalysisClient created as client:", client);
  // Set up display elements which hare show depending on the client status
  client.getHTMLElements(['#query-display']);
  const queryDisplay = new CorpusAnalysisDisplay(client.queryDisplay);
  // Register those display elements to client
  client.setDisplay("query", queryDisplay);
  /**
   * Initializing the results object holding all the data of a query.
   * Also holds the metadata of one query.
   * Lastly it contains the object ResultsList which is a list.js
   * subclass which handles the visual representation of the query data.
   */
   let displayOptionsData = ResultsList.getDisplayOptions('display-options-form');
   ResultsList.options.page = displayOptionsData["resultsPerPage"];
   let data = new Data();
   let resultsList = new ResultsList("result-list", ResultsList.options);
   let resultsMetaData = new MetaData();
   let results = new Results(data, resultsList, resultsMetaData);
   // make results part of the client
   client.results = results;
   // inits some object keys and values
   client.results.clearAll();
   console.info('Initialized the Results object.')
   // init some modals
   let deleteOverlay = () => {
     let overlay = document.getElementsByClassName("modal-overlay")[0];
     overlay.remove();
   };
   client.getHTMLElements(['#meta-data-modal'])
   client.metaDataModal = M.Modal.init(client.metaDataModal,
                                {'preventScrolling': false,
                                 'opacity': 0.0,
                                 'dismissible': false,
                                 'onOpenEnd': deleteOverlay});
  // saving imported data into client object
  const payload = {{ query_result_file_content|tojson|safe }};
  /**
   * Register listeners and their callbacks. Because we are using the client
   * not in dynamic mode we will not load the listeners. We just call the
   * callbacks of the listeners manually. This is done to keep the setup of
   * the client in dynamic or not dynamic mode similarish.
   */
   const listenForQueryStatus = new SocketEventListener('corpus_analysis_query',
                                                        recieveQueryStatus);
   const queryStatusCallback = new ListenerCallback('corpus_analysis_query',
                                                    querySetup);
   listenForQueryStatus.setCallbacks([queryStatusCallback]);
   const listenForQueryData = new SocketEventListener('corpus_analysis_query_results',
                                                   recieveQueryData);
   const queryDataCallback = new ListenerCallback('corpus_analysis_query_results',
                                                  queryRenderResults);
   listenForQueryData.setCallbacks([queryDataCallback]);

//
//   // 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 InteractionElements();
//   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.addInteractions([expertModeInteraction, activateInspectInteraction, changeContextInteraction]);
//
//   // checks if a change for every interactionElement happens and executes
//   // the callbacks accordingly
//   interactionElements.onChangeExecute();
//
//   // 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 directly with callbacks because we are not in dynamic mode
  listenForQueryStatus.listenerCallbacks['corpus_analysis_query'].callbackFunction(payload, client);
  listenForQueryData.listenerCallbacks['corpus_analysis_query_results'].callbackFunction(payload, client);
//   // ### Show corpus Metadata
//   showMetaDataButton.onclick = () => {
//     metaDataModal.open();
//   };
//
//   // 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;
//
//   // new insepct event listener makeing use of javascript bubbleing
//   let resultsTable = document.getElementById("query-results");
//   resultsTable.addEventListener("click", (event) => {
//     if (event.target.classList.contains("inspect-btn")) {
//       const dataIndex = event.target.closest("tr").dataset.index;
//       const fakeResponse = results.jsList.createFakeResponse();
//       results.jsList.showMatchContext(fakeResponse);
//     }
//   });
//
  // Add scrollToTop functionality
  scrollToTop();
});
</script>
{% endblock %}