import { Layout } from "antd";
import { useEffect, useRef, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { MapEditor } from "@map";
import { editorAction, IEditorState } from "@store";
import Tools from "./Tools";

import "./index.less";

const mapStateSelector = (state: IEditorState) => state.map;

const { Header, Footer, Sider, Content } = Layout;

const Plot = () => {
  const mapStageRef = useRef<HTMLDivElement>(null);
  const mapState = useSelector(mapStateSelector);
  const dispatch = useDispatch();

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

  // !mapEditor &&
  useEffect(() => {
    if (mapEditor == null) {
      const editor = new MapEditor(mapStageRef.current!);
      setMapEditor(editor);
      editor.init().then(() => {
        editor.update(mapState);
      });
    }
  }, [mapEditor, mapState]);
  mapEditor?.update(mapState);

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

// const mapStateToProps = (state: IEditorState) => {
//   return state.map;
// };

export default Plot;