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