import { useMonacoEditor } from 'https://cdn.pika.dev/use-monaco';
import { initialize } from 'https://cdn.pika.dev/use-monaco/worker';

import { useMonacoEditor } from 'https://unpkg.com/use-monaco';

function useMonacoEditor(options: {
 ...useMonacoOptions, // see below
 ...useTextModelOptions,
 ...useEditorOptions
}): {
  // assign to a div to render editor
  containerRef: React.MutableRefObject<HTMLDivElement>;
  editor: monaco.editor.IStandaloneCodeEditor;
  loading: boolean;
  monaco: typeof monaco;
  model: monaco.editor.ITextModel;
};

function useMonaco(options: {
  // plugins to enable, eg. [prettier(["graphql", "typescript"]), typings(), ...]
  plugins?: monaco.plugin.IPlugin[];
  paths?: {
    // Custom CDN link for monaco-editor
    vs?: string;
  };
  // A collection of themes that can be selected from
  themes?: { [key: string]: monaco.editor.IStandaloneThemeData };
  // Function will fire when monaco loads from the CDN (this is where you can load custom workers and languages)
  onLoad?: (monaco: typeof monaco) => (() => void) | void;
  // Function will fire when the theme is changed by any editor
  onThemeChange?: (newTheme: string, monaco: typeof monaco) => void;
}): {
  loading: boolean;
  monaco: typeof monaco;
};

function useEditor(options: {
  // must provide monaco instance from useMonaco hook
  monaco?: typeof monaco;

  // model to assign to editor (get this from useTextModel hook)
  model?: monaco.editor.ITextModel;

  // theme for the editor (can be a custom one or name of theme providede to useMonaco hook) [theme will change across editors]
  theme?: string | monaco.editor.IStandaloneThemeData;

  // Function to wire when the value of the model changes
  onChange?: (
    newValue: string,
    editor: monaco.editor.IStandaloneCodeEditor,
    event: monaco.editor.IModelContentChangedEvent,
    monaco: typeof monaco
  ) => void;

  // Function is fired before editor is created (can return options to be provided to the editor)
  editorWillMount?: (
    monaco: typeof monaco
  ) => monaco.editor.IEditorOptions | void;

  // Function is fired after editor is created, return disposables that will be cleared on unmount
  editorDidMount?: (
    editor: monaco.editor.IStandaloneCodeEditor,
    monaco: typeof monaco
  ) => monaco.IDisposable[] | Promise<void> | void;

  // Override internal monaco services for the editor
  overrideServices?:
    | monaco.editor.IEditorOverrideServices
    | ((monaco: typeof monaco) => monaco.editor.IEditorOverrideServices);
  options?: monaco.editor.IEditorOptions;
}): {
  // assign this ref to a div with some styling and you are good to go
  containerRef: React.MutableRefObject<HTMLDivElement>;
  editor: monaco.editor.IStandaloneCodeEditor;
};

function useTextModel(options: {
  // must provide monaco instance from useMonaco hook
  monaco?: typeof monaco;
  // just the initial value for uncontrolled model
  defaultValue?: string;
  // or value for controlled mode
  value?: string;
  // or dictionary of paths to the content of the files (path is used to determine value of the file)
  files?: { [key: string]: string };

  // path of the model you want to select, a new model is created if one doesn't exist
  path?: string;
  // language of the model (can normally be interpreted from path extension)
  language?: string;
  // create models for all files eagerly
  syncAllFiles?: boolean;
}): monaco.editor.ITextModel;

// Register the worker in onLoad or in an effect (remember to cleanup)
monaco.worker.register({
  label: 'babel',
  src: () =>
    new Worker('./path.to.worker.js', {
      // to use esm syntax in worker
      type: 'module',
    }),
});

import { initialize, BaseWorker } from 'use-monaco/worker';
// or https://unpkg.com/use-monaco/dist/esm/worker.js to load from CDN

// Extend BaseWorker to get the ability to use the monaco models on the worker side.
class BabelWorker extends BaseWorker {
  transpile(path) {
    const text = this.getText(path);
    // do some hard work;
    const transpiled = Babel.transpile(text);
    return transpiled;
  }
}

// call initialize to setup the worker to communicate with monaco
initialize('babel', BabelWorker);

// You get a proxy to the registered worker with the contents
// of the files that you mention here synced. The worker has to extend a simple interface
const worker = await monaco.worker.get('babel', 'model1.ts', 'model2.ts');
const something = await worker.transpile('model.ts');