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 (
    <TileLayer
      url={styleUrl}
      attribution={attribution}
    />
  );
};

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: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    },
    satellite: {
      url: 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', // Пример альтернативного стиля
      attribution: '&copy; OpenTopoMap',
    },
    light: {
      url: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',
      attribution: '&copy; <a href="https://carto.com/">CARTO</a>',
    },
    dark: {
      url: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png',
      attribution: '&copy; <a href="https://carto.com/">CARTO</a>',
    },
    outdoors: {
      url: 'https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',
      attribution: '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, Tiles style by HOT',
    },
    'satellite-streets': {
      url: 'https://{s}.tile.stamen.com/terrain/{z}/{x}/{y}.png', // Пример альтернативного стиля
      attribution: '&copy; <a href="http://stamen.com">Stamen Design</a>',
    },
  };

  return (
    <div className="kyrgyzstan-map-container">
      <div className="controls">
        <Button onClick={handleToggle3D} variant="outline">
          {is3D ? 'Переключить на 2D' : 'Переключить на 3D'}
        </Button>
        <Button onClick={() => handleChangeStyle('streets')} variant="outline">
          Улицы
        </Button>
        <Button onClick={() => handleChangeStyle('satellite')} variant="outline">
          Спутник
        </Button>
        <Button onClick={() => handleChangeStyle('light')} variant="outline">
          Светлый
        </Button>
        <Button onClick={() => handleChangeStyle('dark')} variant="outline">
          Темный
        </Button>
        <Button onClick={() => handleChangeStyle('outdoors')} variant="outline">
          На открытом воздухе
        </Button>
        <Button onClick={() => handleChangeStyle('satellite-streets')} variant="outline">
          Спутник+Улицы
        </Button>
      </div>
      <MapContainer
        center={center}
        zoom={7}
        minZoom={minZoom}
        maxZoom={maxZoom}
        maxBounds={bounds}
        style={{ height: '100vh', width: '100%' }}
        scrollWheelZoom={true}
      >
        <ChangeMapStyle
          styleUrl={styleMap[currentStyle].url}
          attribution={styleMap[currentStyle].attribution}
        />
      </MapContainer>
    </div>
  );
};

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