Honey - Marker

import Grid                 from '@material-ui/core/Grid'
import Button               from '@material-ui/core/Button'
import { MapMarker }        from 'mdi-material-ui'
import Map                  from 'pigeon-maps'
import React, { Component } from 'react'
import ReactDOM             from 'react-dom'
import compose              from 'recompose/compose'
import lifecycle            from 'recompose/lifecycle'
import withHandlers         from 'recompose/withHandlers'
import withStateHandlers    from 'recompose/withStateHandlers'
import styled               from 'styled-components'


const positionMap = {
  Leuven: [50.879, 4.6997],
  Lebanon: [33.888630, 35.495480],
}

const Marker = ({ anchor, left, top }) => {
  return (
    <div style={{ position: 'absolute', left, top }}>
      <div style={{ transform: 'translate(-50%,-50%)', left: '50%', top: '0%', position: 'absolute' }}>
        <MapMarker style={{ width: '48px', height: '48px', color: '#145869' }} />
      </div>
    </div>
  )
}

const enhance = compose(
  withStateHandlers(() => ({
    center: positionMap.Leuven,
    marker: positionMap.Lebanon,
    zoom: 12,
  }), {
    centerSet: () => (center) => ({ center }),
    markerSet: () => (marker) => ({ marker }),
    zoomSet: () => (zoom) => ({ zoom }),
  }),
  withHandlers({
    moveToLebanon: ({ centerSet, zoomSet }) => () => {
      centerSet(positionMap.Lebanon)
      zoomSet(14)
    },
    onMapClick: ({ markerSet }) => ({ latLng }) => {
      markerSet(latLng)
    }
  }),
  withHandlers(() => {
    const timerList = []

    return {
      mount: ({ moveToLebanon }) => () => {
        timerList.push(setTimeout(moveToLebanon, 1000))
      },
      unmount: () => () => {
        for (let timer of timerList) {
          clearTimeout(timer)
        }
      }
    }
  }),
  lifecycle({
    componentDidMount() {
      this.props.mount()
    },
    componentWillUnmount() {
      this.props.unmount()
    }
  })
)

const Title = styled(Grid)`
  background-color: rgba(0, 0, 0, 0.6);
  color: white;

  padding: 10px;
`

const App = enhance(({
  center,
  marker,
  zoom,

  onMapClick,
}) => {
  console.log(`marker`, marker)


  return (
    <Grid container justify='center'>
      <Title item xs={12}>
        REGION LOCATION
      </Title>
      <Grid item xs={12} style={{ height: 600 }}>
        <Map
          animate={true}
          attribution={false}
          center={center}
          zoom={zoom}

          onClick={onMapClick}
        >
          {marker ? <Marker
            anchor={marker}
            payload={1}
            onClick={() => {}}
          /> : null}
        </Map>
      </Grid>
      <Grid item xs={12}>
        <Button variant='contained' color='primary' style={{ margin: 5 }}>
          SAVE
        </Button>
      </Grid>
    </Grid>
  )
})

const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)