import { ref, inject } from "vue";

import marker from "@/assets/marker.png";
export default {
  setup() {
    const center = ref([40, 40]);
    const projection = ref("EPSG:4326");
    const zoom = ref(8);
    const rotation = ref(0);

    const contextMenuItems = ref([]);

    const markers = ref(null);
    const view = ref(null);

    const Feature = inject("ol-feature");
    const Geom = inject("ol-geom");

    contextMenuItems.value = [
      {
        text: "Center map here",
        classname: "some-style-class", // add some CSS rules
        callback: (val) => {
          view.value.setCenter(val.coordinate);
        }, // `center` is your callback function
      },
      {
        text: "Add a Marker",
        classname: "some-style-class", // you can add this icon with a CSS class
        // instead of `icon` property (see next line)
        icon: marker, // this can be relative or absolute
        callback: (val) => {
          console.log(val);
          let feature = new Feature({
            geometry: new Geom.Point(val.coordinate),
          });
          markers.value.source.addFeature(feature);
        },
      },
      "-", // this is a separator
    ];

    return {
      center,
      projection,
      zoom,
      rotation,
      contextMenuItems,
      marker,
      markers,
      view,
    };
  },
};