import React, { useRef, useEffect, useState, useCallback } from 'react';
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import './KyrgyzstanMap.scss';
import Button from '../Button/Button';

mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_ACCESS_TOKEN || 'pk.eyJ1IjoianVzdGluY3JlZGlibGUxMzY5IiwiYSI6ImNtMzcxOGNkajBhcHQycXI2eWxhanZ1bHoifQ.Mcw1QWHhglS_7IZtMCJhtA';

const KyrgyzstanMap = () => {
  const mapContainer = useRef(null);
  const map = useRef(null);
  const [is3D, setIs3D] = useState(false);
  const [mapLoaded, setMapLoaded] = useState(false);
  const [currentStyle, setCurrentStyle] = useState('satellite-streets-v12');

  const initializeMap = useCallback(() => {
    if (map.current) return;

    map.current = new mapboxgl.Map({
      container: mapContainer.current,
      style: `mapbox://styles/justincredible1369/cm38ovzuv00k501nwd3ou0kcz`,
      center: [74.7661, 41.2044],
      zoom: 7,
      projection: is3D ? 'globe' : 'mercator',
    });

    map.current.addControl(new mapboxgl.NavigationControl(), 'top-right');

    map.current.on('style.load', () => {
      setMapLoaded(true); // Устанавливаем флаг после загрузки стиля
    });

    map.current.on('load', () => {
      if (is3D && map.current.isStyleLoaded()) {
        map.current.setFog({});
      }
    });

    map.current.on('error', (e) => {
      console.error('Mapbox GL error:', e.error);
    });
  }, [is3D, currentStyle]);

  useEffect(() => {
    initializeMap();

    return () => {
      if (map.current) {
        map.current.remove();
        map.current = null;
      }
    };
  }, [initializeMap]);

  const toggle3D = () => {
    setIs3D((prev) => !prev);
  };

  const changeMapStyle = (styleId) => {
    const styleMap = {
      streets: 'streets-v12',
      satellite: 'satellite-v9',
      light: 'light-v10',
      dark: 'dark-v10',
      outdoors: 'outdoors-v12',
      'satellite-streets': 'satellite-streets-v12',
    };

    const newStyle = styleMap[styleId];
    if (newStyle && map.current) {
      map.current.setStyle(`mapbox://styles/mapbox/${newStyle}`);
      setCurrentStyle(newStyle);
      if (is3D) {
        map.current.once('style.load', () => {
          if (map.current.isStyleLoaded()) {
            map.current.setFog({});
          }
        });
      }
    }
  };

  useEffect(() => {
    if (map.current && mapLoaded) {
      map.current.setProjection(is3D ? 'globe' : 'mercator');
      if (is3D && map.current.isStyleLoaded()) {
        map.current.setFog({});
      } else {
        map.current.setFog(undefined);
      }
    }
  }, [is3D, mapLoaded]);

  return (
    <div className="kyrgyzstan-map">
      <div ref={mapContainer} className="map-container" />
      <div className="controls">
        <Button onClick={toggle3D} variant="secondary" className="toggle-button">
          {is3D ? 'Переключить на 2D' : 'Переключить на 3D'}
        </Button>
        <div className="style-buttons">
          <Button onClick={() => changeMapStyle('streets')} variant="outline">
            Улицы
          </Button>
          <Button onClick={() => changeMapStyle('satellite')} variant="outline">
            Спутник
          </Button>
          <Button onClick={() => changeMapStyle('light')} variant="outline">
            Светлый
          </Button>
          <Button onClick={() => changeMapStyle('dark')} variant="outline">
            Темный
          </Button>
          <Button onClick={() => changeMapStyle('outdoors')} variant="outline">
            На открытом воздухе
          </Button>
        </div>
      </div>
    </div>
  );
};

export default KyrgyzstanMap;



как сделать так чтобы нельзя было продвигать карту дальше определенной точки то есть чтобы нельзя было передвигать камеру дальше территории Кыргызстана и масштабирование тоже ограничить со стороны отдаления