import React from 'react';
import {
  EasyTwinRenderer,
  EasyTwinLoader,
  // PoiImageSource,
  // EventName,
  // DragChangedEvent,
  // DragLightChangedEvent,
} from '@easytwin/core';

import Test from './test';

const ConatinerId = 'scene-editor';

const App: React.FC<unknown> = function () {
  const [themeLoading, setThemeLoading] = React.useState<boolean>(true);

  const [easyTwinRenderer, setEasyTwinRenderer] = React.useState<EasyTwinRenderer>();
  const [easyTwinLoader, setEasyTwinLoader] = React.useState<EasyTwinLoader>();

  React.useEffect(() => {
    const containerDom = document.getElementById(ConatinerId);
    if (themeLoading && containerDom !== null && !easyTwinRenderer && !easyTwinLoader) {
      const renderer = new EasyTwinRenderer({
        containerId: ConatinerId,
      });
      renderer.setViewMode('preview');
      setEasyTwinRenderer(renderer);

      const loader = new EasyTwinLoader(renderer);
      // loader.load('https://easyv.assets.dtstack.com/data/8971/1023978/foler/folder_hgboaehtob/main.json').then(() => {
      loader.load('./testData/未命名_0_1655690832683/').then(() => {
        // eslint-disable-next-line no-alert
        // alert('load success');
        setThemeLoading(false);
      });
      setEasyTwinLoader(loader);
    }

    // return () => {
    //   if (easyTwinRenderer) {
    //     easyTwinRenderer.disposeViewport();
    //     setEasyTwinRenderer(undefined);
    //   }
    //   if (easyTwinLoader) {
    //     setEasyTwinLoader(undefined);
    //   }
    // };
  }, [themeLoading, easyTwinLoader, easyTwinRenderer]);

  return (
    <div className="relative">
      <div
        id={ConatinerId}
        style={{
          width: '100vw',
          height: '100vh',
        }}
      />
    </div>
  );
};

export default App;