class CorpusAnalysisApp {
  constructor(corpusId) {
    this.data = {};

    // HTML elements
    this.elements = {
      container: document.querySelector('#corpus-analysis-app-container'),
      extensionTabs: document.querySelector('#corpus-analysis-app-extension-tabs'),
      initModal: document.querySelector('#corpus-analysis-app-init-modal'),
      overview: document.querySelector('#corpus-analysis-app-overview')
    };
    // Materialize elements
    this.elements.m = {
      extensionTabs: M.Tabs.init(this.elements.extensionTabs),
      initModal: M.Modal.init(this.elements.initModal, {dismissible: false})
    };

    this.extensions = {};

    this.settings = {
      corpusId: corpusId
    };
  }

  init() {
    this.disableActionElements();
    this.elements.m.initModal.open();
    // Init data
    this.data.cqiClient = new cqi.CQiClient('/cqi_over_sio', this.settings.corpusId);
    this.data.cqiClient.connect('anonymous', '')
      .then((cqiStatus) => {
        return this.data.cqiClient.corpora.list();
      })
      .then((cqiCorpora) => {
          this.data.corpus = {o: cqiCorpora[0]};
          console.log(this.data.corpus.o.staticData);
          
          // TODO: Don't do this hgere
          this.data.corpus.o.updateDb();
          this.enableActionElements();
          for (let extension of Object.values(this.extensions)) {extension.init();}
          this.elements.m.initModal.close();
        },
        (cqiError) => {
          let errorString = `${cqiError.code}: ${cqiError.constructor.name}`;
          let errorsElement = this.elements.initModal.querySelector('.errors');
          let progressElement = this.elements.initModal.querySelector('.progress');
          errorsElement.innerText = errorString;
          errorsElement.classList.remove('hide');
          app.flash(errorString, 'error');
          progressElement.classList.add('hide');
        }
      );
  
    // Add event listeners
    for (let extensionSelectorElement of this.elements.overview.querySelectorAll('.extension-selector')) {
      extensionSelectorElement.addEventListener('click', () => {
        this.elements.m.extensionTabs.select(extensionSelectorElement.dataset.target);
      });
    }
  }

  registerExtension(extension) {
    if (extension.name in this.extensions) {
      console.error(`Can't register extension ${extension.name}: Already registered`);
      return;
    }
    this.extensions[extension.name] = extension;
    if ('cQiClient' in this.data && this.data.cQiClient.connected) {extension.init();}
  }

  disableActionElements() {
    let actionElements = this.elements.container.querySelectorAll('.corpus-analysis-action');
    for (let actionElement of actionElements) {
      if (actionElement.nodeName === 'INPUT') {
        actionElement.disabled = true;
      } else if (actionElement.nodeName === 'SELECT') {
        actionElement.parentNode.querySelector('input.select-dropdown').disabled = true;
      } else {
        actionElement.classList.add('disabled');
      }
    }
  }

  enableActionElements() {
    let actionElements = this.elements.container.querySelectorAll('.corpus-analysis-action');
    for (let actionElement of actionElements) {
      if (actionElement.nodeName === 'INPUT') {
        actionElement.disabled = false;
      } else if (actionElement.nodeName === 'SELECT') {
        actionElement.parentNode.querySelector('input.select-dropdown').disabled = false;
      } else {
        actionElement.classList.remove('disabled');
      }
    }
  }
}