import { Map, View } from "ol";
import { TileType, baseTileLayer, geoTileLayer, setBaseTileType } from "./tile";
import {
  HotData,
  addHots,
  delHots,
  hotLayer,
  dynamicHots,
  clearHots,
} from "./hot";
import { Emitter } from "mitt";

const createMap = (container: HTMLDivElement) => {
  const view = new View({
    center: [113.59562585879772, 22.367660742553472],
    projection: "EPSG:4326",
    zoom: 18,
  });

  return new Map({
    layers: [baseTileLayer, geoTileLayer, hotLayer],
    view,
    target: container,
    controls: [],
  });
};

export class Manage {
  map: Map;
  hotsBus: Emitter<{
    active: any;
    click: any;
  }>;

  constructor(container: HTMLDivElement) {
    this.map = createMap(container);
    this.hotsBus = dynamicHots(this.map);
  }

  setTileType(type: TileType) {
    setBaseTileType(type);
    this.map.render();
  }

  addHots(items: HotData[]) {
    addHots(items);
    this.map.render();
  }

  clearHots() {
    clearHots();
    this.map.render();
  }

  setCenter(center: number[]) {
    this.map.getView().setCenter(center);
  }

  delHots(ids: HotData["id"][]) {
    delHots(ids);
    this.map.render();
  }

  render() {
    this.map.render();
  }
}
