import React, { useRef, useEffect, useState } from 'react';
import { MapContainer, TileLayer, useMap } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import './KyrgyzstanMap.scss';
import Button from '../Button/Button';

// Компонент для изменения вида карты (например, светлый, тёмный и т.д.)
const ChangeMapStyle = ({ styleUrl, attribution }) => {
return (

);
};

const KyrgyzstanMap = () => {
const [is3D, setIs3D] = useState(false); // Примечание: Leaflet по умолчанию не поддерживает 3D
const [currentStyle, setCurrentStyle] = useState('streets');

// Определение границ Кыргызстана с небольшим отступом
const bounds = [
[34, 64], // Юго-Западный угол [широта, долгота]
[48, 85], // Северо-Восточный угол [широта, долгота]
];

// Центрирование на Кыргызстане
const center = [41.2044, 74.7661];
const minZoom = 5;
const maxZoom = 15;

const handleToggle3D = () => {
// Leaflet не поддерживает 3D вид по умолчанию.
// Для 3D функций потребуется дополнительное расширение или использование другой библиотеки.
setIs3D(prev => !prev);
alert('3D режим не поддерживается в Leaflet по умолчанию.');
};

const handleChangeStyle = (styleId) => {
setCurrentStyle(styleId);
};

// Определение URL и атрибуции для различных стилей
const styleMap = {
streets: {
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
attribution: '© OpenStreetMap contributors',
},
satellite: {
url: 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', // Пример альтернативного стиля
attribution: '© OpenTopoMap',
},
light: {
url: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',
attribution: '© CARTO',
},
dark: {
url: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png',
attribution: '© CARTO',
},
outdoors: {
url: 'https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',
attribution: '© OpenStreetMap contributors, Tiles style by HOT',
},
'satellite-streets': {
url: 'https://{s}.tile.stamen.com/terrain/{z}/{x}/{y}.png', // Пример альтернативного стиля
attribution: '© Stamen Design',
},
};

return (




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

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

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

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

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

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

<Button onClick={() => handleChangeStyle('satellite-streets')} variant="outline">
Спутник+Улицы


<MapContainer
center={center}
zoom={7}
minZoom={minZoom}
maxZoom={maxZoom}
maxBounds={bounds}
style={{ height: '100vh', width: '100%' }}
scrollWheelZoom={true}
>



);
};
export default KyrgyzstanMap;

// frontend/src/KGMap/KyrgyzstanMap.scss

@import '../styles/variables';
@import '../Button/Button.scss'; // Убедитесь, что путь верный

.kyrgyzstan-map-container {
position: relative;
height: 100vh;
width: 100%;

.controls {
position: absolute;
top: 10px;
left: 10px;
background-color: rgba(255, 255, 255, 0.9);
padding: 1rem;
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
gap: 0.5rem;
z-index: 1000; /* Обеспечивает, что controls всегда сверху */


.toggle-button {
  /* Стили для кнопки переключения 2D/3D */
  padding: 0.5rem 1rem;
  background-color: transparent;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;

  &:hover {
    background-color: #f0f0f0;
  }

  &.active {
    border-color: #007bff;
    color: #007bff;
  }
}

.style-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  .btn-outline {
    padding: 0.5rem 1rem;
    background-color: transparent;
    border: 1px solid #007bff;
    border-radius: 4px;
    color: #007bff;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;

    &:hover {
      background-color: #007bff;
      color: #fff;
    }

    &.active {
      background-color: #0056b3;
      border-color: #0056b3;
      color: #fff;
    }
  }
}
}
}

как можно сделать так чтобы кыргызстан был как то отличен от других стран например другие страны были более белыми в отличии от кыргызстана у меня есть файл с границами kyrgyzstan.json по пути data/kyrgyzstan.json в нем хранятся границы кыргызстана


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