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

{% block page_content %}
<div class="col s12 m4">
  <h3 id="title">{{ corpus.title }}</h3>
  <p id="description">{{ corpus.description }}</p>
  <div class="active preloader-wrapper small" id="progress-indicator">
    <div class="spinner-layer spinner-blue-only">
      <div class="circle-clipper left">
        <div class="circle"></div>
      </div>
      <div class="gap-patch">
        <div class="circle"></div>
      </div>
      <div class="circle-clipper right">
        <div class="circle"></div>
      </div>
    </div>
  </div>
  <span class="chip status white-text" id="status"></span>
</div>

<div class="col s12 m8">
  <div class="card">
    <div class="card-content">
      <span class="card-title">Chronometrics</span>
      <div class="row">
        <div class="col s12 m6">
          <div class="input-field">
            <input disabled value="{{ corpus.creation_date.strftime('%m/%d/%Y, %H:%M:%S %p') }}" id="creation-date" type="text" class="validate">
            <label for="creation-date">Creation date</label>
          </div>
        </div>
      </div>
    </div>
    <div class="card-action right-align">
      <a href="{{ url_for('corpora.analyse_corpus', corpus_id=corpus.id) }}" class="btn hide waves-effect waves-light" id="analyse"><i class="material-icons left">help</i>Analyse</a>
      {% if corpus.files[0] is defined %}
      <a href="{{ url_for('corpora.prepare_corpus', corpus_id=corpus.id) }}" class="btn waves-effect waves-light" id="prepare"><i class="material-icons left">whatshot</i>Build Corpus</a>
      {% endif %}
      <a data-target="delete-corpus-modal" class="btn modal-trigger red waves-effect waves-light"><i class="material-icons left">delete</i>Delete</a>
    </div>
  </div>
</div>

<div class="col s12"></div>

<div class="col s12">
  <div class="card">
    <div class="card-content" style="overflow: hidden;">
      <span class="card-title">Files</span>
      <table class="highlight responsive-table">
        <thead>
          <tr>
            <th>Filename</th>
            <th>Author</th>
            <th>Title</th>
            <th>Publishing year</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% for file in corpus.files %}
          <tr>
            <td>{{ file.filename }}</td>
            <td>{{ file.author }}</td>
            <td>{{ file.title }}</td>
            <td>{{ file.publishing_year }}</td>
            <td class="right-align">
              <a class="btn-small waves-effect waves-light" href="{{ url_for('corpora.edit_corpus_file', corpus_file_id=file.id, corpus_id=corpus.id) }}"><i class="material-icons">edit</i></a>
              <a class="btn-small waves-effect waves-light" href="{{ url_for('corpora.download_corpus_file', corpus_file_id=file.id, corpus_id=corpus.id) }}"><i class="material-icons">file_download</i></a>
              <a data-target="delete-corpus-file-{{ file.id }}-modal" class="btn-small modal-trigger red waves-effect waves-light"><i class="material-icons">delete</i></a>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    <div class="card-action right-align">
      <a href="{{ url_for('corpora.add_corpus_file', corpus_id=corpus.id) }}" class="btn waves-effect waves-light"><i class="material-icons left">add</i>Add corpus file</a>
    </div>
  </div>
</div>


<!-- Modals -->
<div id="delete-corpus-modal" class="modal">
  <div class="modal-content">
    <h4>Confirm corpus deletion</h4>
    <p>Do you really want to delete the corpus {{corpus.title}}? All files will be permanently deleted!</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="btn modal-close waves-effect waves-light">Cancel</a>
    <a href="{{ url_for('corpora.delete_corpus', corpus_id=corpus.id) }}" class="btn modal-close red waves-effect waves-light"><i class="material-icons left">delete</i>Delete</a>
  </div>
</div>

{% for file in corpus.files %}
<div id="delete-corpus-file-{{ file.id }}-modal" class="modal">
  <div class="modal-content">
    <h4>Confirm corpus file deletion</h4>
    <p>Do you really want to delete the corpus file {{ file.filename }}? The file will be permanently deleted!</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="btn modal-close waves-effect waves-light">Cancel</a>
    <a class="btn modal-close red waves-effect waves-light" href="{{ url_for('corpora.delete_corpus_file', corpus_file_id=file.id, corpus_id=corpus.id) }}"><i class="material-icons left">delete</i>Delete</a>
  </div>
</div>
{% endfor %}


<script>
  class InformationUpdater {
    constructor(corpusId, foreignCorpusFlag) {
      this.corpusId = corpusId;
      this.foreignCorpusFlag = foreignCorpusFlag;
      if (this.foreignCorpusFlag) {
        nopaque.foreignCorporaSubscribers.push(this);
      } else {
        nopaque.corporaSubscribers.push(this);
      }
    }

    _init() {
      let corpus;

      if (this.foreignCorpusFlag) {
        corpus = nopaque.foreignCorpora[this.corpusId];
      } else {
        corpus = nopaque.corpora[this.corpusId];
      }

      // Status
      this.setStatus(corpus.status);
    }

    _update(patch) {
      let pathArray;

      for (let operation of patch) {
        /* "/corpusId/valueName" -> ["corpusId", "valueName"] */
        pathArray = operation.path.split("/").slice(1);
        if (pathArray[0] != this.corpusId) {continue;}
        switch(operation.op) {
          case "add":
            location.reload();
            break;
          case "delete":
            location.reload();
            break;
          case "replace":
            if (pathArray[1] === "status") {
              this.setStatus(operation.value);
            }
            break;
          default:
            break;
        }
      }
    }

    setStatus(status) {
      let analyseBtn, progressIndicator, statusElement;

      if (status != "preparable" && status != "preparing") {
        progressIndicator = document.getElementById("progress-indicator");
        progressIndicator.classList.add("hide");
      }
      statusElement = document.getElementById("status");
      statusElement.dataset.status = status;
      analyseBtn = document.getElementById('analyse');
      if (status === 'prepared' || status === 'analysing' || status === 'failed') {
        analyseBtn.classList.remove('hide', 'disabled');
      } else if (status === 'start analysis' || status === 'stop analysis') {
        analyseBtn.classList.remove('hide');
        analyseBtn.classList.add('disabled');
      }
      if (status === 'prepared' || status === 'preparable' || status === 'preparing' || status === 'start analysis' || status === 'analysing' || status === 'stop analysis') {
        var prepareBtn = document.getElementById('prepare');
        prepareBtn.classList.add('hide');
      }
    }
  }

  {% if corpus.creator == current_user %}
  var informationUpdater = new InformationUpdater({{ corpus.id }}, false);
  {% else %}
  var informationUpdater = new InformationUpdater({{ corpus.id }}, true);
  nopaque.socket.emit('subscribe_foreign_user_ressources', {{ corpus.user_id }});
  {% endif %}
</script>
{% endblock %}
