/* global i18n: false */
/* global Whisper: false */

// eslint-disable-next-line func-names
(function() {
  'use strict';

  window.Whisper = window.Whisper || {};

  Whisper.LinkedCopiedToast = Whisper.ToastView.extend({
    render_attributes() {
      return { toastMessage: i18n('debugLogLinkCopied') };
    },
  });

  Whisper.DebugLogLinkView = Whisper.View.extend({
    templateName: 'debug-log-link',
    initialize(options) {
      this.url = options.url;
    },
    events: {
      'click .copy': 'copy',
    },
    render_attributes() {
      return {
        url: this.url,
        reportIssue: i18n('reportIssue'),
        debugLogCopy: i18n('debugLogCopy'),
        debugLogCopyAlt: i18n('debugLogCopyAlt'),
      };
    },
    copy(e) {
      e.preventDefault();
      window.copyText(e.currentTarget.href);
      Whisper.ToastView.show(Whisper.LinkedCopiedToast, document.body);
    },
  });
  Whisper.DebugLogView = Whisper.View.extend({
    templateName: 'debug-log',
    className: 'debug-log modal',
    initialize() {
      this.render();
      this.$('textarea').val(i18n('loading'));

      // eslint-disable-next-line more/no-then
      window.log.fetch().then(text => {
        this.$('textarea').val(text);
      });
    },
    events: {
      'click .submit': 'submit',
      'click .close': 'close',
    },
    render_attributes: {
      title: i18n('submitDebugLog'),
      cancel: i18n('cancel'),
      submit: i18n('submit'),
      close: i18n('gotIt'),
      debugLogExplanation: i18n('debugLogExplanation'),
    },
    close() {
      window.closeDebugLog();
    },
    async submit(e) {
      e.preventDefault();
      const text = this.$('textarea').val();
      if (text.length === 0) {
        return;
      }

      this.$('.buttons, textarea').remove();
      this.$('.result').addClass('loading');

      try {
        const publishedLogURL = await window.log.publish(text);
        const view = new Whisper.DebugLogLinkView({
          url: publishedLogURL,
          el: this.$('.result'),
        });
        this.$('.loading').removeClass('loading');
        view.render();
        this.$('.link')
          .focus()
          .select();
      } catch (error) {
        window.log.error(
          'DebugLogView error:',
          error && error.stack ? error.stack : error
        );
        this.$('.loading').removeClass('loading');
        this.$('.result').text(i18n('debugLogError'));
      }
    },
  });
})();