import { Suspense } from 'react';

import type { FeatureMeta, ViewState } from '../../../types';
import type { useMapData } from '../../../hooks/useMapData';
import type { TravelTimeEntry } from '../../../hooks/useTravelTime';
import type { OverlayId } from '../../../lib/overlays';
import type { BasemapId } from '../../../lib/basemaps';
import { MapFallback } from './Fallbacks';
import { Map } from './lazyComponents';

type MapData = ReturnType<typeof useMapData>;

interface ScreenshotMapPageProps {
  mapData: MapData;
  mapViewFeature: string | null;
  filterRange: [number, number] | null;
  viewSource: 'drag' | 'eye' | null;
  features: FeatureMeta[];
  initialViewState: ViewState;
  theme: 'light' | 'dark';
  ogMode?: boolean;
  travelTimeEntries: TravelTimeEntry[];
  activeOverlays: Set<OverlayId>;
  activeCrimeTypes: Set<string>;
  basemap: BasemapId;
  colorOpacity: number;
}

export function ScreenshotMapPage({
  mapData,
  mapViewFeature,
  filterRange,
  viewSource,
  features,
  initialViewState,
  theme,
  ogMode,
  travelTimeEntries,
  activeOverlays,
  activeCrimeTypes,
  basemap,
  colorOpacity,
}: ScreenshotMapPageProps) {
  return (
    <div className="h-full w-full">
      <Suspense fallback={<MapFallback />}>
        <Map
          data={mapData.data}
          postcodeData={mapData.postcodeData}
          usePostcodeView={mapData.usePostcodeView}
          pois={[]}
          activeOverlays={activeOverlays}
          activeCrimeTypes={activeCrimeTypes}
          basemap={basemap}
          colorOpacity={colorOpacity}
          onViewChange={mapData.handleViewChange}
          viewFeature={mapViewFeature}
          colorRange={mapData.colorRange}
          filterRange={filterRange}
          viewSource={viewSource}
          onCancelPin={() => {}}
          onResetPreviewScale={mapData.handleResetPreviewScale}
          canResetPreviewScale={mapData.canResetPreviewScale}
          features={features}
          selectedHexagonId={null}
          hoveredHexagonId={null}
          onHexagonClick={() => {}}
          onHexagonHover={() => {}}
          initialViewState={initialViewState}
          theme={theme}
          screenshotMode
          ogMode={ogMode}
          bounds={mapData.bounds}
          travelTimeEntries={travelTimeEntries}
        />
      </Suspense>
    </div>
  );
}
