import { Polygons } from "./polygons";
import { Manage } from "../openlayer";
import { register, BoundQueryPlugin } from "drawing-board";
import { PolygonsAttrib } from "@/request/type";

const initBoard = register(
  { polygons: Polygons },
  { bound: new BoundQueryPlugin() }
);

export const createBoard = (container: HTMLDivElement, mapManage: Manage) => {
  const board = initBoard(container, { polygons: undefined }, false);
  const syncBound = () => {
    const bound = mapManage.getBound();
    board.bound.setSize(container.offsetWidth, container.offsetHeight);
    board.bound.setBound([bound[0], bound[3], bound[2], bound[1]]);
  };

  const { map } = mapManage;
  map.addEventListener("moveend", syncBound);

  board.bound.enableMove((newBound) => {
    mapManage.setBound(newBound);
    return false;
  });
  board.bound.enableWheel((newBound) => {
    mapManage.setBound(newBound);
    return false;
  });

  return {
    getData() {
      return board.getData().polygons;
    },
    setData(polygons: PolygonsAttrib, id: string) {
      board.setData({ polygons: { ...polygons, id } });
    },
    destory() {
      board.destory();
      map.removeEventListener("moveend", syncBound);
    },
    polygon() {
      console.log(board.tree);
      return board.tree.children[0] as Polygons;
    },
    getPixelFromCoordinate(point: number[]) {
      return board.tree.getPixelFromStage(point);
    },
  };
};