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 в нем хранятся границы кыргызстана

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

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