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._waitForMapReady();
    },

    on_attach_callback: function () {
      this._waitForMapReady(); // Trigger ulang saat widget dimunculkan
    },

    _waitForMapReady: function () {
      const mapEl = document.getElementById("mapid");
      if (mapEl && mapEl.offsetWidth > 0 && mapEl.offsetHeight > 0) {
        this._loadGoogle();
      } else {
        setTimeout(() => this._waitForMapReady(), 300); // Tambah jeda untuk mode edit/tab
      }
    },

    async _loadGoogle() {
      const apiKey = "AIzaSyB7bG9aSNAJnSrj0Z7f1abFsqKVoiJfsPE"; // Ganti sesuai kebutuhan
      const mapId = "1af072c8d80a2adec8057f34"; // Ganti sesuai kebutuhan

      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=places,marker`;
        script.async = true;
        script.defer = true;
        script.onload = () => this._initMap(mapId);
        document.head.appendChild(script);
      } else {
        this._initMap(mapId);
      }
    },

    async _initMap(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;

      mapEl.style.position = "relative";
      mapEl.style.minHeight = "400px"; // Pastikan map tidak collapse

      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 || undefined,
      });

      // Trigger resize untuk menangani kasus map awalnya hidden
      setTimeout(() => {
        google.maps.event.trigger(map, "resize");
        map.setCenter({ lat, lng }); // Reset ulang posisi setelah resize
      }, 300);

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

      if (edit) {
        marker.addListener("dragend", () => {
          const pos = marker.position;
          this._updateCoordinates(pos.lat, pos.lng);
        });

        // Tambahkan input search
        const input = document.createElement("input");
        input.type = "text";
        input.placeholder = "Cari alamat...";
        input.id = "search-input";
        input.style.cssText = `
          position: absolute;
          top: 10px;
          left: 50%;
          transform: translateX(-50%);
          z-index: 5;
          width: 300px;
          padding: 6px;
          font-size: 14px;
          border-radius: 4px;
          border: 1px solid #ccc;
          background: white;
        `;
        mapEl.appendChild(input);

        const autocomplete = new google.maps.places.Autocomplete(input);
        autocomplete.addListener("place_changed", () => {
          const place = autocomplete.getPlace();
          if (place && place.geometry && place.geometry.location) {
            const pos = place.geometry.location;
            map.setCenter(pos);
            marker.position = pos;
            this._updateCoordinates(pos.lat(), pos.lng());
          }
        });
      }
    },

    _updateCoordinates(lat, lng) {
      this.trigger_up("field_changed", {
        dataPointID: this.dataPointID,
        changes: {
          latitude: lat.toString(),
          longtitude: lng.toString(),
        },
        viewType: this.viewType,
      });
    },

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

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