// frontend/src/KGMap/KyrgyzstanMap.jsx

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 = () => {
  // State variables to manage panel visibility and info
  const [currentStyle, setCurrentStyle] = useState('streets');
  const [isControlPanelOpen, setIsControlPanelOpen] = useState(false);
  const [isInfoPanelOpen, setIsInfoPanelOpen] = useState(false);
  const [kyrgyzstanInfo, setKyrgyzstanInfo] = useState(null);

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

  // Styles for other countries and Kyrgyzstan
  const otherCountriesStyle = {
    fillColor: '#808080',
    fillOpacity: 0.4,
    weight: 0,
    opacity: 0,
  };

  const kyrgyzstanStyle = {
    fillColor: 'transparent',
    fillOpacity: 0,
    weight: 0,
    opacity: 0,
  };

  // Function to handle clicks on Kyrgyzstan
  const onKyrgyzstanClick = () => {
    // Adjust based on your JSON structure
    setKyrgyzstanInfo(kyrgyzstanData.properties);
    setIsInfoPanelOpen(true);
  };

  // Component to render Kyrgyzstan GeoJSON with event handlers
  const KyrgyzstanGeoJSON = () => {
    const onEachFeature = (feature, layer) => {
      if (feature.properties && (feature.properties.ADMIN === 'Kyrgyzstan' || feature.properties.NAME === 'Kyrgyzstan')) {
        layer.on({
          click: onKyrgyzstanClick,
        });
        layer.bindTooltip('Кыргызстан'); // Optional tooltip
      }
    };

    return (
      <GeoJSON
        data={kyrgyzstanData}
        style={kyrgyzstanStyle}
        onEachFeature={onEachFeature}
      />
    );
  };

  return (
    <div className="kyrgyzstan-map-container">
      {/* Top-Left Button: Control Panel Toggle */}
      <Button
        className={`top-left-button ${isControlPanelOpen ? 'active' : ''}`}
        onClick={() => setIsControlPanelOpen(!isControlPanelOpen)}
        variant="outline"
        aria-label="Toggle Control Panel"
      >
        ≡
      </Button>

      {/* Top-Right Button: Info Panel Toggle */}
      <Button
        className={`top-right-button ${isInfoPanelOpen ? 'active' : ''}`}
        onClick={() => setIsInfoPanelOpen(!isInfoPanelOpen)}
        variant="outline"
        aria-label="Toggle Info Panel"
      >
        ℹ️
      </Button>

      {/* Control Panel */}
      <div className={`control-panel ${isControlPanelOpen ? 'open' : ''}`}>
        <h3>Стили карты</h3>
        <div className="style-buttons">
          <Button
            onClick={() => handleChangeStyle('streets')}
            variant="outline"
            size="small"
            className={currentStyle === 'streets' ? 'active' : ''}
          >
            Улицы
          </Button>
          <Button
            onClick={() => handleChangeStyle('satellite')}
            variant="outline"
            size="small"
            className={currentStyle === 'satellite' ? 'active' : ''}
          >
            Спутник
          </Button>
          <Button
            onClick={() => handleChangeStyle('light')}
            variant="outline"
            size="small"
            className={currentStyle === 'light' ? 'active' : ''}
          >
            Светлый
          </Button>
          <Button
            onClick={() => handleChangeStyle('dark')}
            variant="outline"
            size="small"
            className={currentStyle === 'dark' ? 'active' : ''}
          >
            Темный
          </Button>
          <Button
            onClick={() => handleChangeStyle('outdoors')}
            variant="outline"
            size="small"
            className={currentStyle === 'outdoors' ? 'active' : ''}
          >
            На открытом воздухе
          </Button>
        </div>
      </div>

      {/* Info Panel */}
      <div className={`info-panel ${isInfoPanelOpen ? 'open' : ''}`}>
        <h3>Информация о Кыргызстане</h3>
        {kyrgyzstanInfo ? (
          <div>
            {/* Adjust fields based on kyrgyzstan.json structure */}
            <p><strong>Название:</strong> {kyrgyzstanInfo.ADMIN || kyrgyzstanInfo.NAME}</p>
            <p><strong>Столица:</strong> {kyrgyzstanInfo.CAPITAL}</p>
            <p><strong>Население:</strong> {kyrgyzstanInfo.POPULATION}</p>
            {/* Add more fields as necessary */}
          </div>
        ) : (
          <p>Нажмите на территорию Кыргызстана на карте, чтобы получить информацию.</p>
        )}
      </div>

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

        {/* Shading for other countries */}
        <GeoJSON
          data={worldData}
          style={otherCountriesStyle}
          filter={(feature) => {
            const countryName = feature.properties.ADMIN || feature.properties.NAME;
            return countryName !== 'Kyrgyzstan';
          }}
        />

        {/* Interactive Kyrgyzstan Layer */}
        <KyrgyzstanGeoJSON />
      </MapContainer>
    </div>
  );
};

export default KyrgyzstanMap;



// frontend/src/KGMap/KyrgyzstanMap.scss

@import '../styles/variables';
@import '../Button/Button.scss'; // Ensure the path is correct

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

  /* Top-Left Button (Control Panel Toggle) */
  .top-left-button {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1001; /* Higher than panels to stay on top */
    width: 40px;
    height: 40px;
    padding: 0;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;

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

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

    /* Icon styling, assuming using text or icon font */
    font-size: 1.2rem;
    color: #007bff;
  }

  /* Top-Right Button (Info Panel Toggle) */
  .top-right-button {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1001; /* Higher than panels to stay on top */
    width: 40px;
    height: 40px;
    padding: 0;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;

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

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

    /* Icon styling, assuming using text or icon font */
    font-size: 1.2rem;
    color: #007bff;
  }

  /* Control Panel Styling */
  .control-panel {
    position: absolute;
    top: 60px; /* Positioned below the toggle button */
    left: 10px;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* Below the toggle buttons */
    max-width: 250px;
    width: 90%;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;

    &.open {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    h3 {
      margin-top: 0;
      margin-bottom: 1rem;
      font-size: 1.2rem;
      color: #333;
    }

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

      .btn-outline {
        padding: 0.4rem 0.8rem; /* Reduced padding for smaller buttons */
        font-size: 0.9rem; /* Smaller font size */
        transition: background-color 0.3s, color 0.3s;

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

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

  /* Info Panel Styling */
  .info-panel {
    position: absolute;
    top: 60px; /* Positioned below the toggle button */
    right: 10px;
    background-color: rgba(255, 255, 255, 0.95);
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* Below the toggle buttons */
    max-width: 300px;
    width: 90%;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;

    &.open {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    h3 {
      margin-top: 0;
      margin-bottom: 1rem;
      font-size: 1.2rem;
      color: #333;
    }

    p {
      margin: 0.5rem 0;
      color: #555;

      strong {
        color: #333;
      }
    }
  }

  /* Responsive Adjustments */
  @media (max-width: 768px) {
    .control-panel,
    .info-panel {
      max-width: 90%;
      left: 50%;
      right: auto;
      transform: translateX(-50%) translateY(-20px);
      top: 60px;

      &.open {
        transform: translateX(-50%) translateY(0);
      }
    }

    .info-panel {
      right: auto;
      left: 50%;
    }
  }
}


как можно сделать так чтобы можно было выбирать слои наложенные на карту например весь кыргызстан , или области кыргызстана или регионы поделенных областей кыргызстана потом города а также все географические обьекты такие как горы реки озера водохранилища и так далее какую идею ты можешь мне предложить главное чтобы она была интересной и выполнимой