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 [currentStyle, setCurrentStyle] = useState('streets');

  const bounds = [
    [34, 64],
    [48, 85],
  ];

  const center = [41.2044, 74.7661];
  const minZoom = 5;
  const maxZoom = 15;

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

  // Стиль для остальных стран - только затенение без границ
  const otherCountriesStyle = {
    fillColor: '#808080',
    fillOpacity: 0.4,
    weight: 0,
    opacity: 0
  };

  // Стиль для Кыргызстана - только прозрачная территория
  const kyrgyzstanStyle = {
    fillColor: 'transparent',
    fillOpacity: 0,
    weight: 0,
    opacity: 0
  };

  return (
    <div className="kyrgyzstan-map-container">
      <div className="controls">
        <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>
        </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}
          filter={(feature) => {
            const countryName = feature.properties.ADMIN || feature.properties.NAME;
            return countryName !== 'Kyrgyzstan';
          }}
        />

        {/* Прозрачная территория Кыргызстана */}
        <GeoJSON data={kyrgyzstanData} style={kyrgyzstanStyle} />
      </MapContainer>
    </div>
  );
};

export default KyrgyzstanMap;

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