<script setup>
import maplibregl, { GlobeControl } from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";
import * as turf from "@turf/turf";
import MapboxDraw from "@mapbox/mapbox-gl-draw";
import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";
import Code from "./code.vue";
import Editor from "./editor.vue";
import { StyleSpecification } from "maplibre-gl";

const mapContainer = useTemplateRef("mapContainer");

/**
 * @type {Ref<maplibregl.Map>}
 */
const map = ref();

const { feature } = useApi();

MapboxDraw.constants.classes.CANVAS = "maplibregl-canvas";
MapboxDraw.constants.classes.CONTROL_BASE = "maplibregl-ctrl";
MapboxDraw.constants.classes.CONTROL_PREFIX = "maplibregl-ctrl-";
MapboxDraw.constants.classes.CONTROL_GROUP = "maplibregl-ctrl-group";
MapboxDraw.constants.classes.ATTRIBUTION = "maplibregl-ctrl-attrib";

MapboxDraw.lib.theme.find((x) => x.id === "gl-draw-lines").paint[
  "line-dasharray"
] = [0.2, 2];

/**
 * @type {Ref<StyleSpecification & {id string}>}
 */
const styleJSON = ref({
  version: 8,
  sources: {},
  layers: [],
});

onMounted(async () => {
  styleJSON.value = await fetch("/style.json").then((res) => res.json());
  if (!mapContainer.value) return;
  map.value = new maplibregl.Map({
    container: mapContainer.value, // container id
    // style: "https://demotiles.maplibre.org/style.json", // style URL
    // style: "/style.json",
    style: styleJSON.value,
    center: [120.147376, 30.272934], // starting position [lng, lat]
    zoom: 7, // starting zoom
  });
  map.value.removeControl(map.value._controls[0]);
  const draw = new MapboxDraw({
    displayControlsDefault: false,
    controls: {
      point: true,
      line_string: true,
      polygon: true,
      trash: true,
      // combine_features: true,
      // uncombine_features: true,
    },
  });

  const updateArea = (e) => {
    const data = draw.getAll();
    console.log(data);
  };

  map.value.addControl(draw, "top-right");
  map.value.on("draw.create", updateArea);
  map.value.on("draw.delete", updateArea);
  map.value.on("draw.update", updateArea);
  map.value.on("draw.selectionchange", (e) => {
    console.log(e);
  });

  map.value.on("load", () => {
    handleData();
  });

  map.value.addControl(new GlobeControl());
});

onUnmounted(() => {
  if (map.value) map.value.remove();
});

const featureResult = await feature.list({ page: 1, size: 10 });

const handleData = () => {
  if (featureResult.status.value !== "success") return;
  let jsonData = turf.featureCollection(
    featureResult.data.value.data.map((x) =>
      turf.feature(x.geometry, {
        id: x.id,
        name: x.name,
      })
    )
  );

  map.value.addSource("data", { type: "geojson", data: jsonData });
  // map.value.addLayer({
  //   id: "data-symbol",
  //   type: "symbol",
  //   source: "data",
  //   paint: {
  //     "text-color": "#000",
  //   },
  //   layout: {
  //     "text-field": ["get", "name"],
  //     "text-size": 12,
  //   },
  // });
  // map.value.addLayer({
  //   id: "data-fill",
  //   type: "fill",
  //   source: "data",
  //   paint: {
  //     "fill-color": "#000",
  //     "fill-opacity": 0.5,
  //     "fill-outline-color": "#FF0000", // 添加边界线颜色
  //   },
  // });
};

const handleCodesChange = (codes) => {
  if (!map.value) return;
  console.log(codes);
  map.value.setStyle(codes);
};
</script>

<template>
  <div class="w-full h-full flex justify-between">
    <Code
      class="h-full flex-[0_0_20%] overflow-hidden"
      :codes="styleJSON"
      @update:codes="handleCodesChange"
    ></Code>
    <Editor
      class="h-full flex-[0_0_20%] overflow-x-hidden overflow-y-auto"
      :map-style="styleJSON"
    ></Editor>
    <div ref="mapContainer" class="h-full flex-[0_0_50%]"></div>
  </div>
</template>
