text: /* global ace */
  
  import $ from 'jquery';
  import axios from '~/lib/utils/axios_utils';
  import { deprecatedCreateFlash as createFlash } from '~/flash';
  import { BLOB_EDITOR_ERROR, BLOB_PREVIEW_ERROR } from './constants';
  import TemplateSelectorMediator from '../blob/file_template_mediator';
  import getModeByFileExtension from '~/lib/utils/ace_utils';
  import { addEditorMarkdownListeners } from '~/lib/utils/text_markdown';
  
  const monacoEnabledGlobally = window.gon.features?.monacoBlobs;
  
  export default class EditBlob {
    // The options object has:
    // assetsPath, filePath, currentAction, projectId, isMarkdown
    constructor(options) {
      this.options = options;
      this.options.monacoEnabled = this.options.monacoEnabled ?? monacoEnabledGlobally;
      const { isMarkdown, monacoEnabled } = this.options;
      return Promise.resolve()
        .then(() => {
          return monacoEnabled ? this.configureMonacoEditor() : this.configureAceEditor();
        })
        .then(() => {
          this.initModePanesAndLinks();
          this.initFileSelectors();
          this.initSoftWrap();
          if (isMarkdown) {
            addEditorMarkdownListeners(this.editor);
          }
          this.editor.focus();
        })
        .catch(() => createFlash(BLOB_EDITOR_ERROR));
    }
  
    configureMonacoEditor() {
      const EditorPromise = import(
        /* webpackChunkName: 'monaco_editor_lite' */ '~/editor/editor_lite'
      );
      const MarkdownExtensionPromise = this.options.isMarkdown
        ? import('~/editor/editor_markdown_ext')
        : Promise.resolve(false);
      const FileTemplateExtensionPromise = import('~/editor/editor_file_template_ext');
  
      return Promise.all([EditorPromise, MarkdownExtensionPromise, FileTemplateExtensionPromise])
        .then(([EditorModule, MarkdownExtension, FileTemplateExtension]) => {
          const EditorLite = EditorModule.default;
          const editorEl = document.getElementById('editor');
          const fileNameEl =
            document.getElementById('file_path') || document.getElementById('file_name');
          const fileContentEl = document.getElementById('file-content');
          const form = document.querySelector('.js-edit-blob-form');
  
          const rootEditor = new EditorLite();
  
          this.editor = rootEditor.createInstance({
            el: editorEl,
            blobPath: fileNameEl.value,
            blobContent: editorEl.innerText,
          });
  
          rootEditor.use([MarkdownExtension.default, FileTemplateExtension.default], this.editor);
  
          fileNameEl.addEventListener('change', () => {
            this.editor.updateModelLanguage(fileNameEl.value);
          });
  
          form.addEventListener('submit', () => {
            fileContentEl.value = this.editor.getValue();
          });
        })
        .catch(() => createFlash(BLOB_EDITOR_ERROR));
    }
  
    configureAceEditor() {
      const { filePath, assetsPath } = this.options;
      ace.config.set('modePath', `${assetsPath}/ace`);
      ace.config.loadModule('ace/ext/searchbox');
      ace.config.loadModule('ace/ext/modelist');
  
      this.editor = ace.edit('editor');
  
      // This prevents warnings re: automatic scrolling being logged
      this.editor.$blockScrolling = Infinity;
  
      if (filePath) {
        this.editor.getSession().setMode(getModeByFileExtension(filePath));
      }
    }
  
    initFileSelectors() {
      const { currentAction, projectId } = this.options;
      this.fileTemplateMediator = new TemplateSelectorMediator({
        currentAction,
        editor: this.editor,
        projectId,
      });
    }
  
    initModePanesAndLinks() {
      this.$editModePanes = $('.js-edit-mode-pane');
      this.$editModeLinks = $('.js-edit-mode a');
      this.$editModeLinks.on('click', e => this.editModeLinkClickHandler(e));
    }
  
    editModeLinkClickHandler(e) {
      e.preventDefault();
  
      const currentLink = $(e.target);
      const paneId = currentLink.attr('href');
      const currentPane = this.$editModePanes.filter(paneId);
  
      this.$editModeLinks.parent().removeClass('active hover');
  
      currentLink.parent().addClass('active hover');
  
      this.$editModePanes.hide();
  
      currentPane.fadeIn(200);
  
      if (paneId === '#preview') {
        this.$toggleButton.hide();
        axios
          .post(currentLink.data('previewUrl'), {
            content: this.editor.getValue(),
          })
          .then(({ data }) => {
            currentPane.empty().append(data);
            currentPane.renderGFM();
          })
          .catch(() => createFlash(BLOB_PREVIEW_ERROR));
      }
  
      this.$toggleButton.show();
  
      return this.editor.focus();
    }
  
    initSoftWrap() {
      this.isSoftWrapped = Boolean(this.options.monacoEnabled);
      this.$toggleButton = $('.soft-wrap-toggle');
      this.$toggleButton.toggleClass('soft-wrap-active', this.isSoftWrapped);
      this.$toggleButton.on('click', () => this.toggleSoftWrap());
    }
  
    toggleSoftWrap() {
      this.isSoftWrapped = !this.isSoftWrapped;
      this.$toggleButton.toggleClass('soft-wrap-active', this.isSoftWrapped);
      if (this.options.monacoEnabled) {
        this.editor.updateOptions({ wordWrap: this.isSoftWrapped ? 'on' : 'off' });
      } else {
        this.editor.getSession().setUseWrapMode(this.isSoftWrapped);
      }
    }
  }
  