import {
  DocumentRegistry,
  ABCWidgetFactory,
  DocumentWidget,
  Context
} from '@jupyterlab/docregistry';
import React, { useRef, useEffect } from 'react';
import { IFileBrowserFactory } from '@jupyterlab/filebrowser';
import { ISettingRegistry } from '@jupyterlab/settingregistry';
import { ILabShell } from '@jupyterlab/application';
import { ReactWidget } from '@jupyterlab/apputils';
import { Signal } from '@lumino/signaling';
import { dagIcon } from './icons';
import Dag from './Dag';

export const commandIDs = {
  openDagEditor: 'dag-editor:open',
  openDocManager: 'docmanager:open',
  newDocManager: 'docmanager:new-untitled',
  saveDocManager: 'docmanager:save'
};

class DagEditorWidget extends ReactWidget {
  browserFactory: IFileBrowserFactory;
  shell: ILabShell;
  commands: any;
  addFileToDagSignal: Signal<this, any>;
  refreshPaletteSignal: Signal<this, any>;
  context: Context;
  settings: ISettingRegistry.ISettings;

  constructor(options: any) {
    super(options);
    this.browserFactory = options.browserFactory;
    this.shell = options.shell;
    this.commands = options.commands;
    this.addFileToDagSignal = options.addFileToDagSignal;
    this.refreshPaletteSignal = options.refreshPaletteSignal;
    this.context = options.context;
    this.settings = options.settings;
  }

  render(): any {
    return (
      <DagWrapper
        context={this.context}
        browserFactory={this.browserFactory}
        shell={this.shell}
        commands={this.commands}
        addFileToDagSignal={this.addFileToDagSignal}
        refreshPaletteSignal={this.refreshPaletteSignal}
        widgetId={this.parent?.id}
        settings={this.settings}
      />
    );
  }
}

interface IProps {
  context: DocumentRegistry.Context;
  browserFactory: IFileBrowserFactory;
  shell: ILabShell;
  commands: any;
  addFileToDagSignal: Signal<DagEditorWidget, any>;
  refreshPaletteSignal: Signal<DagEditorWidget, any>;
  settings?: ISettingRegistry.ISettings;
  widgetId?: string;
}

const DagWrapper: React.FC<IProps> = ({
  context,
  browserFactory,
  shell,
  commands,
  addFileToDagSignal,
  refreshPaletteSignal,
  settings,
  widgetId
}) => {
  //   const ref = useRef<any>(null);
  const contextRef = useRef(context);

  // 数据重现
  useEffect(() => {
    const currentContext = contextRef.current;
    currentContext.ready.then(() => {});
  }, [contextRef]);

  const saveGraph = (data: any) => {
    contextRef.current.model.fromJSON(data);
    contextRef.current.save();
  };
  return (
    <div style={{ height: '100%' }}>
      <Dag saveGraph={saveGraph} context={contextRef} />
    </div>
  );
};

export class DagEditorFactory extends ABCWidgetFactory<DocumentWidget> {
  browserFactory: IFileBrowserFactory;
  shell: ILabShell;
  commands: any;
  addFileToDagSignal: Signal<this, any>;
  refreshPaletteSignal: Signal<this, any>;
  settings: ISettingRegistry.ISettings;

  constructor(options: any) {
    super(options);
    this.browserFactory = options.browserFactory;
    this.shell = options.shell;
    this.commands = options.commands;
    this.addFileToDagSignal = new Signal<this, any>(this);
    this.refreshPaletteSignal = new Signal<this, any>(this);
    this.settings = options.settings;
  }

  protected createNewWidget(context: DocumentRegistry.Context): DocumentWidget {
    // Creates a blank widget with a DocumentWidget wrapper
    const props = {
      shell: this.shell,
      commands: this.commands,
      browserFactory: this.browserFactory,
      context: context,
      addFileToDagSignal: this.addFileToDagSignal,
      refreshPaletteSignal: this.refreshPaletteSignal,
      settings: this.settings
    };
    const content = new DagEditorWidget(props);

    const widget = new DocumentWidget({ content, context });
    // widget.addClass('dag-editor');
    widget.title.icon = dagIcon;
    return widget;
  }
}
