class CorpusAnalysisReader {
  name = 'Reader';

  constructor(app) {
    this.app = app;

    this.data = {};

    this.elements = {
      // TODO: Prefix elements with "corpus-analysis-app-"
      container: document.querySelector('#reader-extension-container'),
      error: document.querySelector('#reader-extension-error'),
      form: document.querySelector('#reader-extension-form'),
      progress: document.querySelector('#reader-extension-progress'),
      corpus: document.querySelector('#reader-extension-corpus'),
      corpusPagination: document.querySelector('#reader-extension-corpus-pagination')
    };

    this.settings = {
      perPage: parseInt(this.elements.form['per-page'].value),
      textStyle: parseInt(this.elements.form['text-style'].value),
      tokenRepresentation: this.elements.form['token-representation'].value
    }

    this.app.registerExtension(this);
  }

  init() {
    // Init data
    this.data.corpus = this.app.data.corpus;
    this.data.subcorpora = {};
    // Add event listeners
    this.elements.form.addEventListener('submit', (event) => {
      event.preventDefault();
      this.app.disableActionElements();
      this.elements.error.innerText = '';
      this.elements.error.classList.add('hide');
      this.elements.progress.classList.remove('hide');
      this.data.corpus.o.paginate(1, this.settings.perPage)
        .then(
          paginatedCorpus => {
            this.data.corpus.p = paginatedCorpus;
            this.renderCorpus();
            this.renderCorpusPagination();
            this.elements.progress.classList.add('hide');
            this.app.enableActionElements();
          },
          error => {
            this.elements.error.innerText = JSON.stringify(error);
            this.elements.error.classList.remove('hide');
            if ('payload' in error && 'code' in error.payload && 'msg' in error.payload) {
              app.flash(`${error.payload.code}: ${error.payload.msg}`, 'error');
            }
            this.elements.progress.classList.add('hide');
            this.app.enableActionElements();
          }
        );
    });
    this.elements.form.addEventListener('change', event => {
      if (event.target === this.elements.form['per-page']) {
        this.settings.perPage = parseInt(this.elements.form['per-page'].value);
        this.elements.form.submit.click();
      }
      if (event.target === this.elements.form['text-style']) {
        this.settings.textStyle = parseInt(this.elements.form['text-style'].value);
        this.setTextStyle();
      }
      if (event.target === this.elements.form['token-representation']) {
        this.settings.tokenRepresentation = this.elements.form['token-representation'].value;
        this.setTokenRepresentation();
      }
    });
    // Load initial data
    this.elements.form.submit.click();
  }

  clearCorpus() {
    // Destroy with .p-attr elements associated Materialize tooltips
    let pAttrElements = this.elements.corpus.querySelectorAll('.p-attr.tooltipped');
    for (let pAttrElement of pAttrElements) {
      M.Tooltip.getInstance(pAttrElement)?.destroy();
    }
    this.elements.corpus.innerHTML = `
      <p class="show-if-only-child">
        <span class="card-title"><i class="left material-icons" style="font-size: inherit;">search</i>Nothing here...</span><br>
        No text available.
      </p>
    `.trim();
  }

  renderCorpus() {
    this.clearCorpus();
    let item = this.data.corpus.p.items[0];
    this.elements.corpus.innerHTML += `
        <p>${this.cposRange2HTML(item[0], item[item.length - 1])}</p>
    `.trim();
    this.setTextStyle();
    this.setTokenRepresentation();
  }

  clearCorpusPagination() {
    this.elements.corpusPagination.innerHTML = '';
    this.elements.corpusPagination.classList.add('hide');
  }

  renderCorpusPagination() {
    this.clearCorpusPagination();
    if (this.data.corpus.p.pages === 0) {return;}
    this.elements.corpusPagination.innerHTML += `
      <li class="${this.data.corpus.p.page === 1 ? 'disabled' : 'waves-effect'}">
        <a class="corpus-analysis-action pagination-trigger" ${this.data.corpus.p.page === 1 ? '' : 'data-target="1"'}>
          <i class="material-icons">first_page</i>
        </a>
      </li>
    `.trim();
    this.elements.corpusPagination.innerHTML += `
      <li class="${this.data.corpus.p.has_prev ? 'waves-effect' : 'disabled'}">
        <a class="corpus-analysis-action pagination-trigger" ${this.data.corpus.p.has_prev ? 'data-target="' + this.data.corpus.p.prev_num + '"' : ''}>
          <i class="material-icons">chevron_left</i>
        </a>
      </li>
    `.trim();
    for (let i = 1; i <= this.data.corpus.p.pages; i++) {
      this.elements.corpusPagination.innerHTML += `
        <li class="${i === this.data.corpus.p.page ? 'active' : 'waves-effect'}">
          <a class="corpus-analysis-action pagination-trigger" ${i === this.data.corpus.p.page ? '' : 'data-target="' + i + '"'}>${i}</a>
        </li>
      `.trim();
    }
    this.elements.corpusPagination.innerHTML += `
      <li class="${this.data.corpus.p.has_next ? 'waves-effect' : 'disabled'}">
        <a class="corpus-analysis-action pagination-trigger" ${this.data.corpus.p.has_next ? 'data-target="' + this.data.corpus.p.next_num + '"' : ''}>
          <i class="material-icons">chevron_right</i>
        </a>
      </li>
    `.trim();
    this.elements.corpusPagination.innerHTML += `
      <li class="${this.data.corpus.p.page === this.data.corpus.p.pages ? 'disabled' : 'waves-effect'}">
        <a class="corpus-analysis-action pagination-trigger" ${this.data.corpus.p.page === this.data.corpus.p.pages ? '' : 'data-target="' + this.data.corpus.p.pages + '"'}>
          <i class="material-icons">last_page</i>
        </a>
      </li>
    `.trim();
    for (let paginateTriggerElement of this.elements.corpusPagination.querySelectorAll('.pagination-trigger[data-target]')) {
      paginateTriggerElement.addEventListener('click', event => {
        event.preventDefault();
        let page = parseInt(paginateTriggerElement.dataset.target);
        this.page(page);
      });
    }
    this.elements.corpusPagination.classList.remove('hide');
  }

  cposRange2HTML(firstCpos, lastCpos) {
    let html = '';
    for (let cpos = firstCpos; cpos <= lastCpos; cpos++) {
      let prevPAttr = cpos > firstCpos ? this.data.corpus.p.lookups.cpos_lookup[cpos - 1] : null;
      let pAttr = this.data.corpus.p.lookups.cpos_lookup[cpos];
      let nextPAttr = cpos < lastCpos ? this.data.corpus.p.lookups.cpos_lookup[cpos + 1] : null;
      let isEntityStart = 'ent' in pAttr && pAttr.ent !== prevPAttr?.ent;
      let isEntityEnd = 'ent' in pAttr && pAttr.ent !== nextPAttr?.ent;
      // Add a space before pAttr
      if (cpos !== firstCpos || pAttr.simple_pos !== 'PUNCT') {html += ' ';}
      // Add entity start
      if (isEntityStart) {
        html += `<span class="s-attr" data-cpos="${cpos}" data-id="${pAttr.ent}" data-s-attr-type="ent" data-s-attr-ent-type="${this.data.corpus.p.lookups.ent_lookup[pAttr.ent].type}">`;
      }
      // Add pAttr
      html += `<span class="p-attr" data-cpos="${cpos}"></span>`;
      // Add entity end
      if (isEntityEnd) {
        html += ` <span class="badge black-text hide new white ent-indicator" data-badge-caption="">${this.data.corpus.p.lookups.ent_lookup[pAttr.ent].type}</span>`;
        html += '</span>';
      }
    }
    return html;
  }

  page(pageNum, callback) {
    if (this.data.corpus.p.page === pageNum && typeof callback === 'function') {
      callback();
      return;
    }
    this.app.disableActionElements();
    this.elements.progress.classList.remove('hide');
    this.data.corpus.o.paginate(pageNum, this.settings.perPage)
      .then(
        paginatedCorpus => {
          this.data.corpus.p = paginatedCorpus;
          this.renderCorpus();
          this.renderCorpusPagination();
          this.elements.progress.classList.add('hide');
          this.app.enableActionElements();
          if (typeof callback === 'function') {callback();}
        }
      )
  }

  setTextStyle() {
    if (this.settings.textStyle >= 0) {
      // Destroy with .p-attr elements associated Materialize tooltips
      for (let pAttrElement of this.elements.corpus.querySelectorAll('.p-attr.tooltipped')) {
        M.Tooltip.getInstance(pAttrElement)?.destroy();
      }
      // Set basic styling on .p-attr elements
      for (let pAttrElement of this.elements.corpus.querySelectorAll('.p-attr')) {
        pAttrElement.setAttribute('class', 'p-attr');
      }
      // Set basic styling on .s-attr[data-type="ent"] elements
      for (let entElement of this.elements.corpus.querySelectorAll('.s-attr[data-s-attr-type="ent"]')) {
        entElement.querySelector('.ent-indicator').classList.add('hide');
        entElement.removeAttribute('style');
        entElement.setAttribute('class', 's-attr');
      }
    }
    if (this.settings.textStyle >= 1) {
      // Set advanced styling on .s-attr[data-type="ent"] elements
      for (let entElement of this.elements.corpus.querySelectorAll('.s-attr[data-s-attr-type="ent"]')) {
        entElement.classList.add('chip');
        entElement.querySelector('.ent-indicator').classList.remove('hide');
      }
    }
    if (this.settings.textStyle >= 2) {
      // Set advanced styling on .p-attr elements
      for (let pAttrElement of this.elements.corpus.querySelectorAll('.p-attr')) {
        pAttrElement.classList.add('chip', 'hoverable', 'tooltipped');
        let cpos = pAttrElement.dataset.cpos;
        let pAttr = this.data.corpus.p.lookups.cpos_lookup[cpos];
        let positionalPropertiesHTML = `
          <p class="left-align">
            <b>Positional properties</b><br>
            <span>Token: ${cpos}</span>
        `.trim();
        let structuralPropertiesHTML = `
          <p class="left-align">
            <b>Structural properties</b>
        `.trim();
        for (let [property, propertyValue] of Object.entries(pAttr)) {
          if (['lemma', 'ner', 'pos', 'simple_pos', 'word'].includes(property)) {
            if (propertyValue === 'None') {continue;}
            positionalPropertiesHTML += `<br><i class="material-icons" style="font-size: inherit;">subdirectory_arrow_right</i>${property}: ${propertyValue}`;
          } else {
            structuralPropertiesHTML += `<br><span>${property}: ${propertyValue}</span>`;
            if (!(`${property}_lookup` in this.data.corpus.p.lookups)) {continue;}
            for (let [subproperty, subpropertyValue] of Object.entries(this.data.corpus.p.lookups[`${property}_lookup`][propertyValue])) {
              if (subpropertyValue === 'NULL') {continue;}
              structuralPropertiesHTML += `<br><i class="material-icons" style="font-size: inherit;">subdirectory_arrow_right</i>${subproperty}: ${subpropertyValue}`
            }
          }
        }
        positionalPropertiesHTML += '</p>';
        structuralPropertiesHTML += '</p>';
        M.Tooltip.init(
          pAttrElement,
          {html: positionalPropertiesHTML + structuralPropertiesHTML}
        );
      }
    }
  }

  setTokenRepresentation() {
    for (let pAttrElement of this.elements.corpus.querySelectorAll('.p-attr')) {
      let pAttr = this.data.corpus.p.lookups.cpos_lookup[pAttrElement.dataset.cpos];
      pAttrElement.innerText = pAttr[this.settings.tokenRepresentation];
    }
  }
}
