import {
  AfterViewInit,
  ChangeDetectionStrategy,
  Component,
  ElementRef,
  OnDestroy,
  inject,
  input,
  signal,
  viewChild,
  output
} from '@angular/core';
import { Subscription } from 'rxjs';
import { NGX_MONACO_EDITOR_CONFIG, NgxMonacoEditorConfig } from './config';

let loadedMonaco = false;
let loadPromise: Promise<void>;

@Component({
  template: '',
  standalone: false,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export abstract class BaseEditor implements AfterViewInit, OnDestroy {
  config = inject<NgxMonacoEditorConfig>(NGX_MONACO_EDITOR_CONFIG);

  readonly insideNg = input(false);

  readonly _editorContainer = viewChild.required<ElementRef>('editorContainer');
  // eslint-disable-next-line @angular-eslint/no-output-on-prefix
  readonly onInit = output<any>();
  protected _editor: any;
  protected _options: any = {};
  protected _windowResizeSubscription: Subscription | undefined;

  /** Flips to true once Monaco is available; subclass effects gate on this. */
  protected readonly monacoLoaded = signal(false);

  ngAfterViewInit(): void {
    if (!loadedMonaco) {
      loadedMonaco = true;
      loadPromise = new Promise<void>((resolve: any) => {
        let baseUrl = this.config.baseUrl;
        // ensure backward compatibility
        if (baseUrl === 'assets' || !baseUrl) {
          baseUrl = './assets/monaco/min/vs';
        }
        if (typeof (<any>window).monaco === 'object') {
          resolve();
          return;
        }
        const onGotAmdLoader: any = (require?: any) => {
          const usedRequire = require || (<any>window).require;
          const requireConfig = { paths: { vs: `${baseUrl}` } };
          Object.assign(requireConfig, this.config.requireConfig || {});

          // Load monaco
          usedRequire.config(requireConfig);
          usedRequire([`vs/editor/editor.main`], () => {
            if (typeof this.config.onMonacoLoad === 'function') {
              this.config.onMonacoLoad();
            }
            resolve();
          });
        };

        if (this.config.monacoRequire) {
          onGotAmdLoader(this.config.monacoRequire);
          // Load AMD loader if necessary
        } else if (!(<any>window).require) {
          const loaderScript: HTMLScriptElement = document.createElement('script');
          loaderScript.type = 'text/javascript';
          loaderScript.src = `${baseUrl}/loader.js`;
          loaderScript.addEventListener('load', () => {
            onGotAmdLoader();
          });
          document.body.appendChild(loaderScript);
          // Load AMD loader without over-riding node's require
        } else if (!(<any>window).require.config) {
          const src = `${baseUrl}/loader.js`;

          const loaderRequest = new XMLHttpRequest();
          loaderRequest.addEventListener('load', () => {
            const scriptElem = document.createElement('script');
            scriptElem.type = 'text/javascript';
            scriptElem.text = [
              // Monaco uses a custom amd loader that over-rides node's require.
              // Keep a reference to node's require so we can restore it after executing the amd loader file.
              'var nodeRequire = require;',
              loaderRequest.responseText.replace('"use strict";', ''),
              // Save Monaco's amd require and restore Node's require
              'var monacoAmdRequire = require;',
              'require = nodeRequire;',
              'require.nodeRequire = require;'
            ].join('\n');
            document.body.appendChild(scriptElem);
            onGotAmdLoader((<any>window).monacoAmdRequire);
          });
          loaderRequest.open('GET', src);
          loaderRequest.send();
        } else {
          onGotAmdLoader();
        }
      });
    }

    loadPromise.then(() => this.monacoLoaded.set(true));
  }

  protected abstract initMonaco(options: any, insideNg: boolean): void;

  ngOnDestroy() {
    if (this._windowResizeSubscription) {
      this._windowResizeSubscription.unsubscribe();
    }
    if (this._editor) {
      this._editor.dispose();
      this._editor = undefined;
    }
  }
}