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 bounds = [
[64, 34], // Западная и южная границы
[85, 48], // Восточная и северная границы
];

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,
  minZoom: 5, // Минимальный уровень масштабирования
  maxZoom: 15, // Максимальный уровень масштабирования
  maxBounds: bounds, // Ограничение области просмотра
  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 (





{is3D ? 'Переключить на 2D' : 'Переключить на 3D'}


<Button onClick={() => changeMapStyle('streets')} variant="outline">
Улицы

<Button onClick={() => changeMapStyle('satellite')} variant="outline">
Спутник

<Button onClick={() => changeMapStyle('light')} variant="outline">
Светлый

<Button onClick={() => changeMapStyle('dark')} variant="outline">
Темный

<Button onClick={() => changeMapStyle('outdoors')} variant="outline">
На открытом воздухе




);
};
export default KyrgyzstanMap;

как перестать использовать mapbox в этом коде и вместо него использовать openstreetmap для отображения карты кыргызстана насколько я знаю он полностью бесплатный я верно говорю?

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