odoo.define("ab_openstreetmap.googlemap_widget", function (require) {
  "use strict";

  const AbstractField = require("web.AbstractField");
  const fieldRegistry = require("web.field_registry");
  const rpc = require("web.rpc");

  const GoogleMapWidget = AbstractField.extend({
    template: "googlemap_template",

    start: async function () {
      await this._super(...arguments);

      this._waitForElement("#mapid", async () => {
        const apiKey = await rpc.query({
          model: "ir.config_parameter",
          method: "get_param",
          args: ["google.maps.api_key"],
        });
        const mapId = await rpc.query({
          model: "ir.config_parameter",
          method: "get_param",
          args: ["google.maps.map_id"],
        });
        this._loadGoogleMaps(apiKey, mapId);
      });
    },

    _waitForElement: function (selector, callback) {
      const el = document.querySelector(selector);
      if (el && el.offsetHeight > 0 && el.offsetWidth > 0) {
        callback();
      } else {
        setTimeout(() => this._waitForElement(selector, callback), 100);
      }
    },

    _loadGoogleMaps: function (apiKey, mapId) {
      if (!window.google || !window.google.maps) {
        const script = document.createElement("script");
        script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&v=weekly&libraries=marker`;
        script.async = true;
        script.defer = true;
        script.onload = () => this._initMap(mapId);
        document.head.appendChild(script);
      } else {
        this._initMap(mapId);
      }
    },

    _initMap: async function (mapId) {
      const lat = parseFloat(this.recordData.latitude) || -6.2;
      const lng = parseFloat(this.recordData.longtitude) || 106.816666;
      const edit = this.mode === "edit";

      const mapEl = document.getElementById("mapid");
      if (!mapEl) return;

      const { Map } = await google.maps.importLibrary("maps");
      const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

      const map = new Map(mapEl, {
        center: { lat, lng },
        zoom: 15,
        mapId: mapId,
      });

      const marker = new AdvancedMarkerElement({
        map,
        position: { lat, lng },
        gmpDraggable: edit,
        title: "Lokasi",
      });

      if (edit) {
        marker.addListener("dragend", () => {
          const pos = marker.position;
          this.trigger_up("field_changed", {
            dataPointID: this.dataPointID,
            changes: {
              latitude: pos.lat.toString(),
              longtitude: pos.lng.toString(),
            },
            viewType: this.viewType,
          });
        });
      }
    },

    isSet: function () {
      return true;
    },
  });

  fieldRegistry.add("googlemap", GoogleMapWidget);
});