'use client'

import React, { useEffect, useRef } from 'react'
import maplibregl, { ProjectionDefinition } from 'maplibre-gl'
import 'maplibre-gl/dist/maplibre-gl.css'
import { useMap } from '@/app/map-context'
import { apply, applyStyle } from 'ol-mapbox-style';
import { useTheme } from '@/components/theme-provider'
// import TileWMS from 'ol/source/TileWMS.js';
// import Map from 'ol/Map';
// import View from 'ol/View';
// import TileLayer from 'ol/layer/Tile';
// import { transformExtent, fromLonLat } from 'ol/proj.js';
// import StadiaMaps from 'ol/source/StadiaMaps.js';
// import XYZ from 'ol/source/XYZ';
// import 'ol/ol.css';
import { useMapLocation } from '@/hooks/use-map-location'

interface MapComponentProps {
    style?: string
    center?: [number, number]
    zoom?: number
}

// const extent = transformExtent([-126, 24, -66, 50], 'EPSG:4326', 'EPSG:3857');

export function MapComponent({
    style = 'https://api.maptiler.com/maps/019817f1-82a8-7f37-901d-4bedf68b27fb/style.json?key=hj3fxRdwF9KjEsBq8sYI',
    // center = [103.851959, 1.290270],
    // zoom = 11
}: MapComponentProps) {
    const mapContainer = useRef<HTMLDivElement>(null)
    const { setMap } = useMap()
    const { location } = useMapLocation()

    useEffect(() => {
        if (!mapContainer.current) return

        // const tileWmsLayer = new TileLayer({
        //     extent: extent,
        //     source: new TileWMS({
        //         attributions: ['Iowa State University'],
        //         url: 'https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi',
        //         params: { 'LAYERS': 'nexrad-n0r-wmst' },
        //     }),
        //     opacity: 0.7,
        // });

        // const map = new Map({
        //     target: mapContainer.current,
        //     view: new View({
        //         center: fromLonLat(location.center),
        //         zoom: location.zoom,
        //         projection: 'EPSG:3857',

        //         showFullExtent: true,
        //         enableRotation: true

        //     }),
        // })

        // apply(map, style).then(() => {
        //     map.addLayer(tileWmsLayer)
        // })

        const map = new maplibregl.Map({
            container: mapContainer.current,
            style: style,
            center: location.center,
            zoom: location.zoom,
            canvasContextAttributes: {
                contextType: 'webgl2',  // 请求 WebGL2
                antialias: true         // 打开多重采样抗锯齿
            }
        })

        map.on('style.load', () => {
            map.setProjection({
                type: 'globe'
            })

            map.addSource('nexrad', {
                type: 'raster',
                tiles: [
                    // 'https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi?service=WMS&version=1.3.0&request=GetMap&layers=nexrad-n0r-wmst&styles=&format=image/png&transparent=true&crs=EPSG:3857&bbox={bbox-epsg-3857}&width=256&height=256'
                    'http://127.0.0.1:3050/tiles/{z}/{x}/{y}?time=202507220012'
                ],
                tileSize: 256
            });

            map.addLayer({
                id: 'nexrad-layer',
                type: 'raster',
                source: 'nexrad',
                paint: { 'raster-opacity': 0.8 }
            });
        })


        setMap(map, [])

    }, [mapContainer])

    return (
        <div
            ref={mapContainer}
            className="w-full h-full"
            style={{ minHeight: '400px' }}
        />
    )
}