import React, { useEffect } from "react";
import { useModel } from "umi";
import { MiniMap } from "@antv/x6-plugin-minimap";
import { useSessionStorageState } from "ahooks";
export default function Navigator() {
  const { graph } = useModel("erModel");
  const mapRef = React.useRef<HTMLDivElement>(null);
  const [show, setShow] = useSessionStorageState('show-navigator', {
    defaultValue: true,
    listenStorageChange: true,
  });

  useEffect(() => {
    if (graph && mapRef.current) {
      console.log('mini map');
      graph.use(
        new MiniMap({
          container: mapRef.current,
          width: mapRef.current.offsetWidth || 300,
          height: mapRef.current.offsetHeight || 200,
          padding: 10,
          maxScale: 2,
          minScale: 0.2
        })
      );
    }
  }, [graph, mapRef.current]);

  return (
    <div className="absolute right-20px bottom-20px bg-#fafafa w-300px z-2">
      <div className="text-12px color-#333 px-10px py-4px flex items-center cursor-pointer justify-between" onClick={() => setShow(!show)}>
        <span>导航</span>
        <i className="iconfont icon-open cursor-pointer" style={ show ? { transform: "rotate(180deg)" } : {}}/>
      </div>
      <div className="w-300px h-300px" ref={mapRef} style={{ height: show ? 300 : 0, overflow: "hidden" }}>
      </div>
    </div>
  );
}