import React, { useEffect, useRef } from 'react';
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import config from '../../../../config';
import LayerMgr from '../../MapCtrl/mapstyle/layermgr';
import { getLayerVisible, getLayerSetting, getCameraTarget } from '../../../../models/map/selectors';
import { useDispatch, useSelector } from 'react-redux';
// 设置你的 Mapbox 访问令牌
mapboxgl.accessToken = 'pk.eyJ1IjoiaW5ob25vb3IiLCJhIjoiQzgzSmFadyJ9.jQDKFw6z_HrtBzu8hY415g';

const TrackMap = ({ trackData }) => {
  const mapContainer = useRef(null);
  const map = useRef(null);
  const layermgrRef = useRef(new LayerMgr());
  const layerSetting = useSelector(getLayerSetting);

  useEffect(() => {
    if (!mapContainer.current) return;
    layermgrRef.current.init(layerSetting);
    // 初始化地图
    map.current = new mapboxgl.Map({
      container: mapContainer.current,
      style: layermgrRef.current.getMapStyle(), // 使用暗色主题
      center: [114.88069, 31.171967], // 以轨迹起点为中心
      minZoom: 5,
      maxZoom: 18,
      pitch: config.homePitch,
      bounds: config.initalExtent,
      maxBounds: config.w_extent_mb,
      preserveDrawingBuffer: true,
    });

    map.current.on('load', () => {
      if (!map.current) return;

      // // 添加轨迹数据源
      // map.current.addSource('track', {
      //   type: 'geojson',
      //   data: {
      //     type: 'Feature',
      //     properties: {},
      //     geometry: {
      //       type: 'LineString',
      //       coordinates: trackData.coordinates
      //     }
      //   }
      // });

      // // 添加轨迹线图层
      // map.current.addLayer({
      //   id: 'track-line',
      //   type: 'line',
      //   source: 'track',
      //   layout: {
      //     'line-join': 'round',
      //     'line-cap': 'round'
      //   },
      //   paint: {
      //     'line-color': '#1890ff',
      //     'line-width': 3,
      //     'line-opacity': 0.8
      //   }
      // });

      // 添加起点标记
      // new mapboxgl.Marker({ color: '#00ff00' })
      //   .setLngLat(trackData.coordinates[0])
      //   .setPopup(new mapboxgl.Popup().setHTML('起点'))
      //   .addTo(map.current);

      // // 添加终点标记
      // new mapboxgl.Marker({ color: '#ff0000' })
      //   .setLngLat(trackData.coordinates[trackData.coordinates.length - 1])
      //   .setPopup(new mapboxgl.Popup().setHTML('终点'))
      //   .addTo(map.current);

      // 添加轨迹点图层
      // map.current.addLayer({
      //   id: 'track-points',
      //   type: 'circle',
      //   source: 'track',
      //   paint: {
      //     'circle-radius': 4,
      //     'circle-color': '#ffffff',
      //     'circle-stroke-width': 1,
      //     'circle-stroke-color': '#1890ff'
      //   }
      // });

      // // 添加动画效果
      // let animationStep = 0;
      // const animateTrack = () => {
      //   if (!map.current) return;

      //   // 更新轨迹线的渐变动画
      //   map.current.setPaintProperty('track-line', 'line-gradient', [
      //     'step',
      //     ['line-progress'],
      //     '#1890ff',
      //     animationStep,
      //     '#ffffff'
      //   ]);

      //   animationStep = (animationStep + 0.001) % 1;
      //   requestAnimationFrame(animateTrack);
      // };

      // animateTrack();
    });

    // 清理函数
    return () => {
      map.current?.remove();
    };
  }, [[]]);

  return <div ref={mapContainer} style={{width:500}} />;
};

export default TrackMap;