// KyrgyzstanMap.js

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

import kyrgyzstanData from '../data/kyrgyzstan.json';
import worldData from '../data/world.json'; // Убедитесь, что этот файл существует

const KyrgyzstanMap = () => {
  const [is3D, setIs3D] = useState(false);
  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 = () => {
    setIs3D(prev => !prev);
    alert('3D режим не поддерживается в Leaflet по умолчанию.');
  };

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

  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',
    },
  };

  const otherCountriesStyle = {
    fillColor: 'rgba(128, 128, 128, 0.3)', // Лёгкое затенение остальных стран
    weight: 1,
    color: '#666',
    fillOpacity: 0.3,
  };

  const kyrgyzstanStyle = {
    fillColor: 'transparent', // Убираем заливку Кыргызстана
    weight: 3, // Толще граница для выделения
    color: '#FF5733', // Яркая граница
    fillOpacity: 1, // Полная непрозрачность границы
  };

  return (
    <div className="kyrgyzstan-map-container">
      <div className="controls">
        <button
          className={toggle-button ${is3D ? 'active' : ''}}
          onClick={handleToggle3D}
        >
          {is3D ? 'Переключить на 2D' : 'Переключить на 3D'}
        </button>

        <div className="style-buttons">
          <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>
      </div>

      <MapContainer
        center={center}
        zoom={7}
        minZoom={minZoom}
        maxZoom={maxZoom}
        maxBounds={bounds}
        style={{ height: '100vh', width: '100%' }}
        scrollWheelZoom={true}
      >
        <TileLayer
          url={styleMap[currentStyle].url}
          attribution={styleMap[currentStyle].attribution}
        />

        {/* Затенение остальных стран */}
        <GeoJSON data={worldData} style={otherCountriesStyle} />

        {/* Выделение Кыргызстана */}
        <GeoJSON data={kyrgyzstanData} style={kyrgyzstanStyle} />
      </MapContainer>
    </div>
  );
};

export default KyrgyzstanMap;

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