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

{% set headline = ' ' %}

{% set full_width = True %}

{% block page_content %}
{{ Macros.insert_color_scheme(corpus_analysis_color_darken) }}
<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" id="interactions-menu">
        {% include 'interactions/infos.html.j2' %}
        {% include 'interactions/display.html.j2' %}
        {% include 'interactions/analysis.html.j2' %}
        {% include 'interactions/cite.html.j2' %}
        <div class="hide">
          {# Hide those because they are not needed when inspecting results.
          But some of their elements are being asked for by the client. #}
          {% include 'interactions/export.html.j2' %}
          {% include 'interactions/create.html.j2' %}
        </div>
      </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_corpus_files.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 Client classes. Client handles the server client communication.
import {
  Client,
  ClientEventListener,
  ListenerCallback,
} from '../../static/js/modules/corpus_analysis/client/Client.js';
/**
 * Import Client listener functions which will listen for defined socket or
 * javascript events.
 */
import {
  recieveQueryStatus,
  recieveQueryData,
} from '../../static/js/modules/corpus_analysis/client/listeners.js';
// Import client listener callbacks so they can be registered to the listeners.
import {
  prepareQueryData,
  saveQueryData,
} from '../../static/js/modules/corpus_analysis/client/callbacks.js';
// Import Results class which will be used to save results data of a query etc.
import {
  Results,
} from '../../static/js/modules/corpus_analysis/model/Results.js';
/**
 * Import the ResultsList which can be understood as a View class that handles
 * how the data from Results is represented to the user. The ViewEventListener
 * is used to register listener functions which listen for events emitred by
 * the Client.
 */
import {
  ResultsList,
  ViewEventListener,
} from '../../static/js/modules/corpus_analysis/view/ResultsView.js';
// Import listener which will be registered to the ViewEventListener class.
import {
  recieveClientNotification,
} from '../../static/js/modules/corpus_analysis/view/listeners.js';
import {
  scrollToTop,
} from '../../static/js/modules/corpus_analysis/view/scrollToTop.js'
// vanilla javascript Event listeners which are listening for button clicks etc
import {
  pageNavigation,
  expertModeSwitch,
  actionButtons,
  displayOptions,
  showMetaData,
  showCorpusFiles,
} from '../../static/js/modules/corpus_analysis/view/eventListeners.js';
/**
 * Second Phase:
 * Asynchronus and event driven code.
 */
document.addEventListener("DOMContentLoaded", () => {
  /**
   * Initializing the results object as a model holding all the data of a
   * query. Also holds the metadata of one query and results data.
   * After that initialize the ResultsList object as the View handeling the
   * representation of the data for the user.
   */
  let results = new Results();
  let resultsList = new ResultsList('result-list', ResultsList.options);
  // Import results data from json file.
  const resultsJson = {{ query_result_file_content|tojson|safe }};
  // Import metadata from DB passed to this view
  const metaDataJson = {{ query_metadata|tojson|safe }};
  // Initialize the client with dynamicMode set to false.
  const client = new Client({'logging': true,
                             'dynamicMode': false,
                             'fullContext': metaDataJson.fullContext});
    /**
   * Register needed listeners and their callbacks. But we will
   * just call the attached callbacks manually. Because dynamicMode is false.
   */
  const listenForQueryStatus = new ClientEventListener('corpus_analysis_query',
                                                       recieveQueryStatus);
  const queryStatusCallback = new ListenerCallback('corpus_analysis_query',
                                                   prepareQueryData,
                                                   [client, results]);
  listenForQueryStatus.setCallbacks([queryStatusCallback]);
  const listenForQueryData = new ClientEventListener('corpus_analysis_query_results',
                                                     recieveQueryData);
  const queryDataCallback = new ListenerCallback('corpus_analysis_query_results',
                                                 saveQueryData,
                                                 [client, results]);
  listenForQueryData.setCallbacks([queryDataCallback]);
  // Set the event listeners
  client.setSocketEventListeners([
    listenForQueryStatus,
    listenForQueryData,
  ]);
  /**
   * Register resultsList listeners listening to notification events emitted by
   * the Client class.
   */
  const listenForClientNotification = new ViewEventListener('notify-view',
                                                            recieveClientNotification);
  resultsList.setViewEventListeners([listenForClientNotification]);
  resultsList.loadViewEventListeners();
  // Get all needed HTMLElements for the following event listeners.
  resultsList.getHTMLElements([
    '.add-btn',
    '.pagination',
    '#display-options-form-expert_mode',
    '#display-options-form-result_context',
    '#display-options-form-results_per_page',
    '#full-results-create',
    '#full-results-export',
    '#inspect-results-export',
    '#meta-data-modal-content',
    ['#meta-data-modal', {
       'preventScrolling': false,
       'opacity': 0.0,
       'dismissible': false,
       'onOpenEnd': (() => {document.querySelector(".modal-overlay").remove()})
      }
    ],
    '#query-results-table',
    '#show-meta-data',
    '#show-corpus-files',
    '#show-corpus-files-modal-content',
    ['#show-corpus-files-modal', {
       'preventScrolling': false,
       'opacity': 0.0,
       'dismissible': false,
       'onOpenEnd': (() => {document.querySelector(".modal-overlay").remove()})
      }
    ],
    '#sub-results-create',
    '#sub-results-export',
  ]);
  // Hide buttons which are not needed when just inspecting results
  resultsList.inspectResultsExport.classList.add('hide');
  // Execute client event listener callbacks manually because dynamicMode is false
  client.eventListeners['corpus_analysis_query'].executeCallbacks([resultsJson]);
  // Save meta data to results after the init callback from line above
  results.metaData = metaDataJson;
  client.eventListeners['corpus_analysis_query_results'].executeCallbacks([resultsJson]);

  // Call the vanilla event listeners listening for clicks etc. from the user.
  pageNavigation(resultsList, results, client);
  expertModeSwitch(resultsList, results);
  actionButtons(resultsList, results, client);
  displayOptions(resultsList, results, client);
  showMetaData(resultsList, results);
  showCorpusFiles(resultsList, results);
  // Enable scroll to Top functionality.
  scrollToTop('#headline', '#menu-scroll-to-top-div');
});
</script>
{% endblock %}