text: import React, {useState, useCallback} from 'react'
  import PropTypes from 'prop-types'
  import {ChevronDown, ChevronUp, Check} from 'react-feather'
  
  import colors from '../styles/colors'
  
  const MapSelector = ({selectedMapId, maps, selectMap, selectStat}) => {
    const selectedMap = maps.find(m => m.name === selectedMapId)
  
    const [isOpen, setIsOpen] = useState(false)
  
    const handleMap = useCallback(map => {
      const {name, property} = map
      selectStat(property)
      selectMap(name)
      setIsOpen(false)
    }, [selectMap, selectStat])
  
    const handleClick = useCallback(event => {
      event.stopPropagation()
      setIsOpen(!isOpen)
    }, [isOpen])
  
    return (
      <div className='switch'>
        <div className='header' onClick={handleClick}>
          <span>{selectedMap.name}</span> {isOpen ? <ChevronUp /> : <ChevronDown />}
        </div>
        {isOpen && (
          <div className='menu'>
            {maps.map(map => (
              <div
                key={map.name}
                className={`menu-item ${selectedMapId === map.name ? 'selected' : ''}`}
                onClick={() => handleMap(map)}
              >
                <span>{map.name}</span> {map.name === selectedMapId && <Check />}
              </div>
            ))}
          </div>
        )}
  
        <style jsx>{`
          .switch {
            display: flex;
            flex-direction: column;
            position: relative;
          }
  
          .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5em;
          }
  
          .switch:hover {
            cursor: pointer;
          }
  
          .menu {
            position: absolute;
            display: flex;
            flex-direction: column;
            width: 100%;
            top: 100%;
            background-color: #000000aa;
          }
  
          .menu-item {
            display: flex;
            align-items: center;
            padding: 0.2em 0.5em;
          }
  
          .menu-item:hover {
            background-color: ${colors.lightGrey};
            color: #000;
          }
  
          .menu-item.selected:hover {
            background-color: transparent;
            cursor: initial;
          }
  
          span {
            margin-right: 0.4em;
          }
          `}</style>
      </div>
    )
  }
  
  MapSelector.propTypes = {
    selectedMapId: PropTypes.string.isRequired,
    maps: PropTypes.array.isRequired,
    selectMap: PropTypes.func.isRequired,
    selectStat: PropTypes.func.isRequired
  }
  
  export default MapSelector
  