import React, { useState } from 'react'
import { createRoot } from 'react-dom/client';


import 'mapbox-gl/dist/mapbox-gl.css';
import Points from './Points';
import Regions from './Regions';
import Countries from './Countries';

const initialMapOptions = [
  { name: "Объекты ВИЭ", current: true },
  { name: "Регионы РФ", current: false },
  { name: "Страны мира", current: false },
];



function Maps() {
  const [mapOptions, setMapOptions] = useState(initialMapOptions);
  const onMapOptionClick = (e) => {
    const clickedName = e.target.innerText
    const newMapOptions = mapOptions.map(option => option.name == clickedName ? {...option, current: true} : {...option, current: false})
    setMapOptions(newMapOptions)
  }
  return (
    <React.StrictMode>
      {mapOptions.find(option => option.current).name == "Объекты ВИЭ" && <Points mapOptions={mapOptions} onMapOptionClick={onMapOptionClick} />}
      {mapOptions.find(option => option.current).name == "Регионы РФ" && <Regions mapOptions={mapOptions} onMapOptionClick={onMapOptionClick} />}
      {mapOptions.find(option => option.current).name == "Страны мира" && <Countries mapOptions={mapOptions} onMapOptionClick={onMapOptionClick} />}
    </React.StrictMode>
  )
}

const domNode = document.getElementById('root')
const root = createRoot(domNode)
root.render(
  <Maps />
)