import {
  Map,
  NavigationControl,
  type NavigationControlOptions,
} from "maplibre-gl";

export class CustomNavigationControl extends NavigationControl {
  _zoomLevel: HTMLButtonElement | undefined;

  constructor(options: NavigationControlOptions) {
    super(options);

    if (this.options.showZoom) {
      this._zoomLevel = document.createElement("button");
      this._zoomLevel.textContent = "0.0";
      this._zoomLevel.setAttribute("aria-label", "Zoom level");
      this._zoomLevel.setAttribute("title", "Zoom level");
      this._zoomLevel.setAttribute("aria-disabled", "false");
      this._container.insertBefore(this._zoomLevel, this._zoomInButton);
    }
  }

  override onAdd(map: Map) {
    super.onAdd(map);

    if (this.options.showZoom) {
      this._updateZoomLevel();
      this._map.on("zoom", () => this._updateZoomLevel());
    }

    return this._container;
  }

  override onRemove() {
    if (this.options.showZoom) {
      this._map.off("zoom", () => this._updateZoomLevel());
    }

    super.onRemove();
  }

  _updateZoomLevel() {
    if (this._zoomLevel && this._map) {
      this._zoomLevel.textContent = this._map.getZoom().toFixed(1);
    }
  }
}