'use client';

/**
 * Lazy-loaded Map Components
 *
 * Heavy MapLibre GL (~800KB) is loaded only when components are rendered.
 * Use these for automatic code-splitting with Suspense fallback.
 *
 * For direct imports without lazy loading, use:
 * import { MapContainer } from '@djangocfg/ui-tools/map'
 */

import * as React from 'react';
import { createLazyComponent, MapLoadingFallback } from '../../../common';
import type { MapContainerProps } from './components';

// ============================================================================
// Lazy Components
// ============================================================================

/**
 * LazyMapContainer - Lazy-loaded map container
 *
 * Automatically shows loading state while MapLibre GL loads (~800KB)
 */
export const LazyMapContainer = createLazyComponent<MapContainerProps>(
  () =>
    import('./components/MapContainer').then((mod) => ({
      default: mod.MapContainer,
    })),
  {
    displayName: 'LazyMapContainer',
    fallback: <MapLoadingFallback minHeight={400} />,
  }
);

/**
 * LazyMapView - Lazy-loaded map view (alias for MapContainer)
 */
export const LazyMapView = createLazyComponent<Omit<MapContainerProps, 'initialViewport'>>(
  () =>
    import('./components/MapContainer').then((mod) => ({
      default: mod.MapView,
    })),
  {
    displayName: 'LazyMapView',
    fallback: <MapLoadingFallback minHeight={400} />,
  }
);

// ============================================================================
// Light primitives — direct re-exports
//
// MapMarker / MapPopup / MapCluster / MapSource / MapLayer / MapControls
// etc. are thin wrappers around `react-map-gl/maplibre`. They don't import
// `maplibre-gl` at module scope (only types, which are erased), so exporting
// them synchronously here costs ~tens of KB at most — not the ~800KB of
// MapLibre GL itself.
//
// The heavy library only loads when `LazyMapContainer` actually mounts,
// because `MapContainer.tsx` (the only module that imports `maplibre-gl`
// at runtime) is reached exclusively via the dynamic import above.
//
// This means consumers can write:
//
//   import { LazyMapContainer, MapMarker, MapPopup } from '@djangocfg/ui-tools/map'
//
// …and still get correct code-splitting.
// ============================================================================

export {
  MapMarker,
  MapPopup,
  MapCluster,
  MapSource,
  MapLayer,
  MapControls,
  CustomOverlay,
  MapLegend,
  LayerSwitcher,
} from './components';

export { MapProvider, useMapContext, MapContext } from './context';
export type { MapProviderProps } from './context';

export type {
  MapContainerProps,
  MapMarkerProps,
  MapPopupProps,
  MapClusterProps,
  MapSourceProps,
  MapLayerProps,
  MapControlsProps,
} from './components';

export type {
  MapViewport,
  MapStyleKey,
  MarkerData,
} from './types';
