import { useEffect, useState } from 'react'
import Box from '@mui/material/Box'
import CircularProgress from '@mui/material/CircularProgress'
import Map, { Marker } from 'react-map-gl/maplibre'
import type * as maplibregl from 'maplibre-gl'

let maplibreglPromise: Promise<typeof maplibregl> | null = null

function loadMaplibre() {
  if (!maplibreglPromise) {
    maplibreglPromise = Promise.all([import('maplibre-gl'), import('maplibre-gl/dist/maplibre-gl.css')]).then(
      ([mod]) => mod,
    )
  }
  return maplibreglPromise
}

const rasterStyle = {
  version: 8 as const,
  sources: {
    osm: {
      type: 'raster' as const,
      tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
      tileSize: 256,
      attribution: '© OpenStreetMap contributors',
    },
  },
  layers: [{ id: 'osm', type: 'raster' as const, source: 'osm' }],
}

type AboutMapProps = {
  lat: number
  lng: number
}

export function AboutMap({ lat, lng }: AboutMapProps) {
  const [maplibre, setMaplibre] = useState<typeof maplibregl | null>(null)

  useEffect(() => {
    let cancelled = false
    loadMaplibre().then((mod) => {
      if (!cancelled) setMaplibre(mod)
    })
    return () => {
      cancelled = true
    }
  }, [])

  if (!maplibre) {
    return (
      <Box
        sx={{
          height: 380,
          borderRadius: 2,
          border: 1,
          borderColor: 'divider',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <CircularProgress size={24} />
      </Box>
    )
  }

  return (
    <Box
      sx={{
        height: 380,
        borderRadius: 2,
        overflow: 'hidden',
        border: 1,
        borderColor: 'divider',
        position: 'relative',
      }}
    >
      <Map
        mapLib={maplibre}
        initialViewState={{ latitude: lat, longitude: lng, zoom: 15 }}
        style={{ width: '100%', height: 380 }}
        mapStyle={rasterStyle}
        scrollZoom={false}
        dragRotate={false}
        dragPan={false}
        doubleClickZoom={false}
        keyboard={false}
        touchZoomRotate={false}
      >
        <Marker longitude={lng} latitude={lat} anchor="bottom">
          <Box
            sx={{
              width: 20,
              height: 20,
              bgcolor: 'primary.main',
              borderRadius: '50%',
              border: 2,
              borderColor: 'background.paper',
              boxShadow: 3,
            }}
          />
        </Marker>
      </Map>
    </Box>
  )
}
