import type { PropsWithChildren } from 'react'
import type { MapProviderProps } from './providers/map/types'
import type { LassoToolsProviderProps } from './editable/lasso-tools/provider/types'
import type { MeasurementToolsProviderProps } from './editable/measurement-tools/provider/types'
import { MapProvider } from './providers/map/provider'
import { LassoToolsProvider } from './editable/lasso-tools/provider/provider'
import { MeasurementToolsProvider } from './editable/measurement-tools/provider/provider'

interface Props {
  maps: MapProviderProps['values']
  lassoTools?: LassoToolsProviderProps['values']
  measureTools?: MeasurementToolsProviderProps['values']
}

/**
 * Comprehensive context provider that orchestrates multiple map instances with centralized state management,
 * coordinating {@link MapProvider}, {@link LassoToolsProvider}, and {@link MeasurementToolsProvider}.
 *
 * @remarks
 * This is the recommended entry point for applications using multiple maps or requiring coordination
 * between map instances and interactive tools. For simple single-map scenarios, you can use
 * individual providers directly.
 *
 * @example
 * ```tsx
 * <MapsProvider
 *   maps={[{ id: 'main-map', basemap: CartoBasemaps.voyager, viewState: { latitude: 40.7, longitude: -74, zoom: 10 } }]}
 *   lassoTools={[{ mapId: 'main-map', enabled: false, modes: DEFAULT_LASSO_TOOLS_MODES, modeSelected: 'polygon' }]}
 * >
 *   <MapComponent id="main-map" />
 * </MapsProvider>
 * ```
 */
export function MapsProvider({
  children,
  maps,
  lassoTools = [],
  measureTools = [],
}: PropsWithChildren<Props>) {
  return (
    <MapProvider values={maps}>
      <LassoToolsProvider values={lassoTools}>
        <MeasurementToolsProvider values={measureTools}>
          {children}
        </MeasurementToolsProvider>
      </LassoToolsProvider>
    </MapProvider>
  )
}
