export type MapEngine = 'leaflet' | 'maplibre' | 'openlayers' | 'google';

export interface RasterSource {
  type: 'raster';
  urlTemplate: string;
  attribution?: string;
  maxZoom?: number;
}

export interface MapLibreStyleSource {
  type: 'maplibre-style';
  styleUrl: string;
}

export interface OpenLayersOsmSource {
  type: 'openlayers-osm';
}

export interface GoogleMapsSource {
  type: 'google';
  mapId?: string;
}

export type BaseMapSource =
  | RasterSource
  | MapLibreStyleSource
  | OpenLayersOsmSource
  | GoogleMapsSource;

export interface BaseMapMarker {
  id?: string | number;
  lat: number;
  lng: number;
  popup?: string;
}

export interface LatLngValue {
  lat: number | null;
  lng: number | null;
}

export interface CoordinateValue extends LatLngValue {
  address?: string;
}

export type InputMapMode = 'click' | 'drag' | 'center';

export type MarkerConfig =
  | {
      kind: 'pin';
      pinOptions?: google.maps.marker.PinElementOptions;
      title?: string;
    }
  | {
      kind: 'img';
      src: string;
      title?: string;
    }
  | {
      kind: 'svgString';
      svg: string;
      title?: string;
    }
  | {
      kind: 'customElement';
      createElement: () => HTMLElement;
      title?: string;
    };

export interface MapControl {
  position?: google.maps.ControlPosition;
  index?: number;
  createElement: (ctx: { map: google.maps.Map }) => HTMLElement;
}

export interface MapFocusConfig {
  name: string;
  featureType: google.maps.FeatureType;
  featureStyleOptions: google.maps.FeatureStyleOptions;
}

export interface DialogCoordinateProps {
  value?: LatLngValue & { _id?: string };
  center?: [number, number];
  zoom?: number;
  mode?: InputMapMode;
  colorScheme?: 'LIGHT' | 'DARK';
  mapOptions?: google.maps.MapOptions;
  customMarkers?: CustomMarker[];
  inputMarkerConfig?: MarkerConfig;
  type: 'input' | 'detail';
  card?: boolean;
}

export interface CustomMarker {
  lat: number;
  lng: number;
  title?: string;
  desc?: string;
}