import { MapData, MapView, Position, TShow3DMapOptions } from "@mappedin/mappedin-js";
import { IControl } from "maplibre-gl";

//#region src/index.d.ts

/**
 * Mappedin JS makes use of MapLibre to render the outdoor portion of the map. Mappedin JS exposes this layer through {@link MapView.Outdoor} and can be used to add additional layers as described in the [Outdoor Map Guide](https://developer.mappedin.com/web-sdk/outdoor-map).
 *
 * It is also possible to utilize the opposite architecture, by adding a MapView to a MapLibre Map.
 * This is accomplished by using {@link MappedinMapLibreOverlay} class. It allows a developer to easily add a Mappedin indoor map to an existing MapLibre based app.
 *
 * Refer to the [Mappedin MapLibre Overlay](https://developer.mappedin.com/web-sdk/mappedin-maplibre-overlay) for more information and interactive examples.

 * @experimental
 */
declare const createMapLibreOverlay: (mapData: MapData, showMapOptions?: TShow3DMapOptions) => MappedinMapLibreOverlay;
type TMappedinMapLibreOverlayEvents = {
  /**
   * Event emitted when the MappedinMap is loaded
   */
  loaded: {
    /**
     * MapView instance
     */
    mapView: MapView;
    /**
     * MapData instance
     */
    mapData: MapData;
  };
};
/**
 * ## MappedinMapLibreOverlay in Mappedin JS
 *
 * MappedinMapLibreOverlay allows you to integrate Mappedin indoor maps into existing MapLibre-based applications. This class implements the MapLibre IControl interface, making it easy to add as a control to any MapLibre map.
 *
 * ### Features
 * - **Seamless Integration**: Add indoor maps to existing MapLibre applications
 * - **Event System**: Listen for map loading and state changes
 * - **Outdoor Context**: Automatic outdoor map integration with tokens
 * - **Customizable Options**: Configure map appearance and behavior
 * - **Lifecycle Management**: Proper cleanup and resource management
 *
 * > **Best Practice:** Use this class when you have an existing MapLibre application and want to add indoor mapping capabilities. For new applications, consider using the standard MapView approach.
 *
 * ### Example Usage
 * ```ts
 * // Create the overlay
 * const overlay = new MappedinMapLibreOverlay(
 *   { latitude: 43.6532, longitude: -79.3832 },
 *   mapData,
 *   { showDefaultUI: true }
 * );
 *
 * // Add to MapLibre map
 * mapLibreMap.addControl(overlay);
 *
 * // Listen for map loading
 * overlay.on('loaded', ({ mapView, mapData }) => {
 *   console.log('Indoor map loaded!');
 *   // Now you can use mapView for interactions
 * });
 * ```
 *
 * ### Integration Patterns
 * - **Add as Control**: Use `map.addControl(overlay)` to add to MapLibre
 * - **Event Handling**: Listen for 'loaded' event to access MapView
 * - **Outdoor Integration**: Automatic outdoor context with proper tokens
 * - **Cleanup**: Properly remove overlay when done
 *
 * ### More Information
 * - [MapLibre Overlay Guide](https://developer.mappedin.com/web-sdk/mappedin-maplibre-overlay)
 * - [Outdoor Map Guide](https://developer.mappedin.com/web-sdk/outdoor-map)
 * - [Getting Started Guide](https://developer.mappedin.com/web-sdk/getting-started)
 *
 * Mappedin JS makes use of MapLibre to render the outdoor portion of the map. Mappedin JS exposes this layer through {@link MapView.Outdoor} and can be used to add additional layers as described in the [Outdoor Map Guide](https://developer.mappedin.com/web-sdk/outdoor-map).
 *
 * It is also possible to utilize the opposite architecture, by adding a MapView to a MapLibre Map.
 * This is accomplished by using this MappedinMapLibreOverlay class. It allows a developer to easily add a Mappedin indoor map to an existing MapLibre based app.
 *
 * Use {@link createMapLibreOverlay} to instantiate this class.
 *
 * Refer to the [Mappedin MapLibre Overlay](https://developer.mappedin.com/web-sdk/mappedin-maplibre-overlay) for more information and interactive examples.
 */
declare class MappedinMapLibreOverlay implements IControl {
  #private;
  static instance: MappedinMapLibreOverlay;
  /** @internal */
  constructor(origin: Position | undefined, mapData: MapData, options?: TShow3DMapOptions);
  /** @internal */
  onAdd(map: any): HTMLDivElement;
  /** @internal */
  onRemove(): void;
  /**
   * Subscribe to overlay events.
   *
   * Listen for events emitted by the overlay, such as when the map is loaded and ready for interaction.
   *
   * @param eventName The name of the event to listen for.
   * @param fn The callback function to execute when the event is emitted.
   *
   * @example Listen for map loading
   * ```ts
   * overlay.on('loaded', ({ mapView, mapData }) => {
   *   console.log('Indoor map loaded successfully!');
   *   console.log('Map name:', mapData.mapName);
   *
   *   // Now you can use the MapView for interactions
   *   const spaces = mapData.getByType('space');
   *   console.log('Number of spaces:', spaces.length);
   * });
   * ```
   *
   * @example Set up map interactions after loading
   * ```ts
   * overlay.on('loaded', ({ mapView, mapData }) => {
   *   // Add markers to the map
   *   const coordinate = mapView.createCoordinate(43.6532, -79.3832);
   *   const marker = mapView.Markers.add(coordinate, {
   *     color: 'red',
   *     label: 'Important Location'
   *   });
   *
   *   // Listen for map interactions
   *   mapView.on('click', (event) => {
   *     console.log('Map clicked:', event.coordinate);
   *   });
   * });
   */
  on: <EventName extends keyof TMappedinMapLibreOverlayEvents>(eventName: EventName, fn: (payload: TMappedinMapLibreOverlayEvents[EventName] extends {
    data: null;
  } ? TMappedinMapLibreOverlayEvents[EventName]["data"] : TMappedinMapLibreOverlayEvents[EventName]) => void) => void;
  /**
   * Unsubscribe from overlay events.
   *
   * Remove event listeners to prevent memory leaks and unwanted callbacks.
   *
   * @param eventName The name of the event to unsubscribe from.
   * @param fn The callback function that was previously registered with `on()`.
   *
   * @example Remove event listener
   * ```ts
   * const handleLoaded = ({ mapView, mapData }) => {
   *   console.log('Map loaded');
   * };
   *
   * overlay.on('loaded', handleLoaded);
   *
   * // Later, remove the listener
   * overlay.off('loaded', handleLoaded);
   * ```
   *
   * @example Clean up multiple listeners
   * ```ts
   * const listeners = [];
   *
   * const addListeners = () => {
   *   const loadedHandler = ({ mapView, mapData }) => {
   *     console.log('Map loaded');
   *   };
   *
   *   overlay.on('loaded', loadedHandler);
   *   listeners.push(['loaded', loadedHandler]);
   * };
   *
   * const removeListeners = () => {
   *   listeners.forEach(([eventName, handler]) => {
   *     overlay.off(eventName, handler);
   *   });
   *   listeners.length = 0;
   * };
   * ```
   */
  off: <EventName extends keyof TMappedinMapLibreOverlayEvents>(eventName: EventName, fn: (payload: TMappedinMapLibreOverlayEvents[EventName] extends {
    data: null;
  } ? TMappedinMapLibreOverlayEvents[EventName]["data"] : TMappedinMapLibreOverlayEvents[EventName]) => void) => void;
}
//#endregion
export { MappedinMapLibreOverlay, TMappedinMapLibreOverlayEvents, createMapLibreOverlay };