/********************************************************************************
 * Copyright (C) 2018 TypeFox and others.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * This Source Code may also be made available under the following Secondary
 * Licenses when the conditions for such availability set forth in the Eclipse
 * Public License v. 2.0 are satisfied: GNU General Public License, version 2
 * with the GNU Classpath Exception which is available at
 * https://www.gnu.org/software/classpath/license.html.
 *
 * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
 ********************************************************************************/

// import * as ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import * as React from 'react';
import { injectable, unmanaged, inject } from 'inversify';
import { Disposable, DisposableCollection } from '@gedit/utils';
import { BaseWidget, Message } from './widget';
import { Widget } from '@phosphor/widgets';
import { ConfigProvider, ThemeConfig } from 'antd';
import { AntdThemeContributionRegistry } from '@gedit/theme';

interface WidgetChildProps {
  children: React.ReactNode;
  themeToken: ThemeConfig;
  dispose: () => void
}

const WidgetChild = (props: WidgetChildProps) => {
  React.useLayoutEffect(() => {
    props.dispose();
  });
  return (
    <ConfigProvider theme={props.themeToken}>
      {props.children}
    </ConfigProvider>
  );
};

@injectable()
export abstract class ReactWidget extends BaseWidget {

  protected readonly onRender = new DisposableCollection();

  root: ReturnType<typeof createRoot> = createRoot(this.node);

  @inject(AntdThemeContributionRegistry)
  antdThemeContributionRegistry: AntdThemeContributionRegistry;

  constructor(@unmanaged() options?: Widget.IOptions) {
    super(options);
    this.scrollOptions = {
      suppressScrollX: true,
      minScrollbarLength: 35,
    };
    this.toDispose.push(Disposable.create(() => {
      this.root?.unmount();
      // ReactDOM.unmountComponentAtNode(this.node);
    }));
  }

  protected override onUpdateRequest(msg: Message): void {
    super.onUpdateRequest(msg);
    const themeToken = this.antdThemeContributionRegistry?.getAntdTheme();
    const dispose = () => {
      this.onRender.dispose();
    };
    // ReactDOM.render(<React.Fragment>{this.render()}</React.Fragment>, this.node, dispose);
    this.root.render(
      <WidgetChild themeToken={themeToken} dispose={dispose}>
        {this.render()}
      </WidgetChild>
    );
  }

  /**
   * Render the React widget in the DOM.
   * - If the widget has been previously rendered,
   * any subsequent calls will perform an update and only
   * change the DOM if absolutely necessary.
   */
  protected abstract render(): React.ReactNode;
}