import { useEffect, useRef, useState } from "react";
import { MapEditor } from "@map";
import { IEditorState, editorAction } from "@store";

import Tools from "./Tools";

import "./index.less";

const Plot = () => {
  const mapStageRef = useRef<HTMLDivElement>(null);

  const [mapEditor, setMapEditor] = useState<MapEditor | null>(null);

  useEffect(() => {
    if (mapEditor == null) {
      const editor = new MapEditor(mapStageRef.current!);
      (window as any).mapEditor = editor;
      setMapEditor(editor);
      editorAction.registerMapEditor(editor);
    }
  }, [mapEditor]);

  return (
    <>
      <div className="map-stage" ref={mapStageRef}></div>
      {/* <div className="tools-properties"></div> */}
      <div className="tools-area">
        <Tools />
      </div>
    </>
  );
};

export default Plot;