import * as React from 'react';
import type {
  Map as MmrMap,
  MapOptions,
  Marker as MmrMarker,
  MarkerOptions,
  Popup as MmrPopup,
  PopupOptions,
  AttributionControl as MmrAttributionControl,
  FullscreenControl as MmrFullscreenControl,
  GeolocateControl as MmrGeolocateControl,
  NavigationControl as MmrNavigationControl,
  ScaleControl as MmrScaleControl
} from 'mmr-gl';
import {MapStyle, AnyLayer, AnySource} from './types/style-spec-mmr';

import {default as _Map, MapProps as _MapProps} from './components/map';
import {default as _Marker, MarkerProps as _MarkerProps} from './components/marker';
import {default as _Popup, PopupProps as _PopupProps} from './components/popup';
import {
  default as _AttributionControl,
  AttributionControlProps as _AttributionControlProps
} from './components/attribution-control';
import {
  default as _FullscreenControl,
  FullscreenControlProps as _FullscreenControlProps
} from './components/fullscreen-control';
import {
  default as _GeolocateControl,
  GeolocateControlProps as _GeolocateControlProps
} from './components/geolocate-control';
import {
  default as _NavigationControl,
  NavigationControlProps as _NavigationControlProps
} from './components/navigation-control';
import {
  default as _ScaleControl,
  ScaleControlProps as _ScaleControlProps
} from './components/scale-control';
import {default as _Layer, LayerProps as _LayerProps} from './components/layer';
import {default as _Source, SourceProps as _SourceProps} from './components/source';
import {useMap as _useMap} from './components/use-map';
import type {MapRef as _MapRef} from './mmr/create-ref';
import type * as events from './types/events';
import type {MapCallbacks} from './types/events-mmr';

export function useMap() {
  return _useMap<MmrMap>();
}

export type MapProps = _MapProps<MapOptions, MapStyle, MapCallbacks, MmrMap>;
export type MapRef = _MapRef<MmrMap>;
const mapLib = import('mmr-gl');
export const Map = (() => {
  return React.forwardRef(function Map(props: MapProps, ref: React.Ref<MapRef>) {
    return _Map<MapOptions, MapStyle, MapCallbacks, MmrMap>(props, ref, mapLib);
  });
})();

export type MarkerProps = _MarkerProps<MarkerOptions, MmrMarker>;
export const Marker = _Marker as (
  props: MarkerProps & React.RefAttributes<MmrMarker>
) => React.ReactElement | null;

export type PopupProps = _PopupProps<PopupOptions, MmrPopup>;
export const Popup = _Popup as (
  props: PopupProps & React.RefAttributes<MmrPopup>
) => React.ReactElement | null;

type AttributionControlOptions = ConstructorParameters<typeof MmrAttributionControl>[0];
export type AttributionControlProps = _AttributionControlProps<AttributionControlOptions>;
export const AttributionControl = _AttributionControl as (
  props: AttributionControlProps
) => React.ReactElement | null;

type FullscreenControlOptions = ConstructorParameters<typeof MmrFullscreenControl>[0];
export type FullscreenControlProps = _FullscreenControlProps<FullscreenControlOptions>;
export const FullscreenControl = _FullscreenControl as (
  props: FullscreenControlProps
) => React.ReactElement | null;

type NavigationControlOptions = ConstructorParameters<typeof MmrNavigationControl>[0];
export type NavigationControlProps = _NavigationControlProps<NavigationControlOptions>;
export const NavigationControl = _NavigationControl as (
  props: NavigationControlProps
) => React.ReactElement | null;

type GeolocateControlOptions = ConstructorParameters<typeof MmrGeolocateControl>[0];
export type GeolocateControlProps = _GeolocateControlProps<
  GeolocateControlOptions,
  MmrGeolocateControl
>;
export const GeolocateControl = _GeolocateControl as (
  props: GeolocateControlProps & React.RefAttributes<MmrGeolocateControl>
) => React.ReactElement | null;

type ScaleControlOptions = ConstructorParameters<typeof MmrScaleControl>[0];
export type ScaleControlProps = _ScaleControlProps<ScaleControlOptions>;
export const ScaleControl = _ScaleControl as (
  props: ScaleControlProps
) => React.ReactElement | null;

export type LayerProps = _LayerProps<AnyLayer>;
export const Layer = _Layer as (props: LayerProps) => React.ReactElement | null;

export type SourceProps = _SourceProps<AnySource>;
export const Source = _Source as (props: SourceProps) => React.ReactElement | null;

export {default as useControl} from './components/use-control';
export {MapProvider} from './components/use-map';

export default Map;

// Types
export * from './types/public';
export type {default as Point} from '@mapbox/point-geometry';
export type {
  PointLike,
  LngLat,
  LngLatLike,
  LngLatBounds,
  LngLatBoundsLike,
  PaddingOptions,
  MapGeoJSONFeature,
  GeoJSONSource,
  VideoSource,
  ImageSource,
  CanvasSource,
  VectorTileSource
} from 'mmr-gl';
export * from './types/style-spec-mmr';

// Events
export type {
  MapEvent,
  MapMouseEvent,
  MapLayerMouseEvent,
  MapTouchEvent,
  MapLayerTouchEvent,
  MapStyleDataEvent,
  MapSourceDataEvent,
  MapWheelEvent,
  MapBoxZoomEvent,
  ErrorEvent,
  ViewStateChangeEvent
} from './types/events-mmr';
export type PopupEvent = events.PopupEvent<MmrPopup>;
export type MarkerEvent = events.MarkerEvent<MmrMarker>;
export type MarkerDragEvent = events.MarkerDragEvent<MmrMarker>;
export type GeolocateEvent = events.GeolocateEvent<MmrGeolocateControl>;
export type GeolocateResultEvent = events.GeolocateResultEvent<MmrGeolocateControl>;
export type GeolocateErrorEvent = events.GeolocateErrorEvent<MmrGeolocateControl>;