/*
 * decaffeinate suggestions:
 * DS002: Fix invalid constructor
 * DS101: Remove unnecessary use of Array.from
 * DS102: Remove unnecessary code created because of implicit returns
 * DS206: Consider reworking classes to avoid initClass
 * Full docs: https://github.com/decaffeinate/decaffeinate/blob/main/docs/suggestions.md
 */
const Cls = (app.views.OfflinePage = class OfflinePage extends app.View {
  constructor(...args) {
    this.onClick = this.onClick.bind(this);
    super(...args);
  }

  static initClass() {
    this.className = '_static';
  
    this.events = {
      click: 'onClick',
      change: 'onChange'
    };
  }

  deactivate() {
    if (super.deactivate(...arguments)) {
      this.empty();
    }
  }

  render() {
    if (app.cookieBlocked) {
      this.html(this.tmpl('offlineError', 'cookie_blocked'));
      return;
    }

    app.docs.getInstallStatuses(statuses => {
      if (!this.activated) { return; }
      if (statuses === false) {
        this.html(this.tmpl('offlineError', app.db.reason, app.db.error));
      } else {
        let html = '';
        for (var doc of Array.from(app.docs.all())) { html += this.renderDoc(doc, statuses[doc.slug]); }
        this.html(this.tmpl('offlinePage', html));
        this.refreshLinks();
      }
    });
  }

  renderDoc(doc, status) {
    return app.templates.render('offlineDoc', doc, status);
  }

  getTitle() {
    return 'Offline';
  }

  refreshLinks() {
    for (var action of ['install', 'update', 'uninstall']) {
      this.find(`[data-action-all='${action}']`).classList[this.find(`[data-action='${action}']`) ? 'add' : 'remove']('_show');
    }
  }

  docByEl(el) {
    let slug;
    while (!(slug = el.getAttribute('data-slug'))) { el = el.parentNode; }
    return app.docs.findBy('slug', slug);
  }

  docEl(doc) {
    return this.find(`[data-slug='${doc.slug}']`);
  }

  onRoute(context) {
    this.render();
  }

  onClick(event) {
    let action;
    let el = $.eventTarget(event);
    if (action = el.getAttribute('data-action')) {
      const doc = this.docByEl(el);
      if (action === 'update') { action = 'install'; }
      doc[action](this.onInstallSuccess.bind(this, doc), this.onInstallError.bind(this, doc), this.onInstallProgress.bind(this, doc));
      el.parentNode.innerHTML = `${el.textContent.replace(/e$/, '')}ing…`;
    } else if (action = el.getAttribute('data-action-all') || el.parentElement.getAttribute('data-action-all')) {
      if ((action === 'uninstall') && !window.confirm('Uninstall all docs?')) { return; }
      app.db.migrate();
      for (el of Array.from(this.findAll(`[data-action='${action}']`))) { $.click(el); }
    }
  }

  onInstallSuccess(doc) {
    if (!this.activated) { return; }
    doc.getInstallStatus(status => {
      let el;
      if (!this.activated) { return; }
      if (el = this.docEl(doc)) {
        el.outerHTML = this.renderDoc(doc, status);
        $.highlight(el, {className: '_highlight'});
        this.refreshLinks();
      }
    });
  }

  onInstallError(doc) {
    let el;
    if (!this.activated) { return; }
    if (el = this.docEl(doc)) {
      el.lastElementChild.textContent = 'Error';
    }
  }

  onInstallProgress(doc, event) {
    let el;
    if (!this.activated || !event.lengthComputable) { return; }
    if (el = this.docEl(doc)) {
      const percentage = Math.round((event.loaded * 100) / event.total);
      el.lastElementChild.textContent = el.lastElementChild.textContent.replace(/(\s.+)?$/, ` (${percentage}%)`);
    }
  }

  onChange(event) {
    if (event.target.name === 'autoUpdate') {
      app.settings.set('manualUpdate', !event.target.checked);
    }
  }
});
Cls.initClass();