// @flow
import React from 'react'
import {connect} from 'react-redux'
import {
  zoomSelector,
  centerSelector,
  addressesSelector,
  clustersSelector,
  addressesUrlSelector,
} from '../../../selectors'
import {setMapOptions} from '../../../actions/verejneActions'
import './GoogleMap.css'
import {map} from 'lodash'
import ClusterMarker from './ClusterMarker'
import {branch, compose, renderComponent, withHandlers, lifecycle} from 'recompose'
import Loading from '../../Loading'
import GoogleMap from '../../GoogleMap'
import {withDataProviders} from 'data-provider'
import {addressesProvider} from '../../../dataProviders/publiclyDataProviders'
import {withRouter} from 'react-router-dom'
import qs from 'qs'
import {DEFAULT_MAP_CENTER, COUNTRY_ZOOM} from '../../../constants'
import debounce from 'lodash/debounce'

import type {MapOptions, Entity} from '../../../state'
import type {MapCluster} from '../../../selectors'
import type {GenericAction} from '../../../types/reduxTypes'
import type {RouterHistory} from 'react-router'

type Props = {
  zoom: number,
  center: [number, number],
  entities: Array<Entity>,
  setMapOptions: (mapOptions: MapOptions) => GenericAction<MapOptions, MapOptions>,
  clusters: Array<MapCluster>,
  onChange: (options: MapOptions) => any,
  history: RouterHistory,
}

// NOTE: there can be multiple points on the map on the same location...
const Map = ({
  zoom,
  center,
  clusters,
  onChange,
}: Props) => {
  return (
    <div className="google-map-wrapper">
      <GoogleMap center={center} zoom={zoom} onChange={debounce(onChange, 2000)}>
        {map(clusters, (cluster, i) => (
          <ClusterMarker
            key={i}
            cluster={cluster}
            zoom={zoom}
            lat={cluster.lat}
            lng={cluster.lng}
          />
        ))}
      </GoogleMap>
    </div>
  )
}

export default compose(
  connect(
    (state) => ({
      zoom: zoomSelector(state),
      center: centerSelector(state),
      addresses: addressesSelector(state),
      clusters: clustersSelector(state),
      addressesUrl: addressesUrlSelector(state),
    }),
    {
      setMapOptions,
    }
  ),
  withDataProviders(({addressesUrl}) =>
    [addressesProvider(addressesUrl)]),
  withRouter,
  withHandlers({
      onChange: (props) => (options) =>  {
        props.setMapOptions(options)
        props.history.replace(
          `?lat=${options.center.lat}&lng=${options.center.lng}&zoom=${options.zoom}`
        )
      }
  }),
  lifecycle({
    componentDidMount() {
      const params = qs.parse(this.props.history.location.search.substr(1))
      params.lat = params.lat === undefined ? DEFAULT_MAP_CENTER.lat : params.lat
      params.lng = params.lng === undefined ? DEFAULT_MAP_CENTER.lng : params.lng
      params.zoom = params.zoom === undefined ? COUNTRY_ZOOM : params.zoom
      this.props.setMapOptions(
        {center: [Number(params.lat), Number(params.lng)], zoom: Number(params.zoom)}
      )
    }
  }),
  // display loading only before first fetch
  branch((props) => !props.addresses, renderComponent(Loading))
)(Map)

@@ -780,47 +780,8 @@
 nts'
-%0Aimport debounce from 'lodash/debounce'
 %0A%0Aim
@@ -1357,26 +1357,21 @@
 = (%7B
-%0A  
 zoom,
-%0A 
  center,
 %0A  c
@@ -1366,18 +1366,16 @@
  center,
-%0A 
  cluster
@@ -1376,18 +1376,16 @@
 lusters,
-%0A 
  onChang
@@ -1385,18 +1385,16 @@
 onChange
-,%0A
 %7D: Props
@@ -1511,25 +1511,16 @@
 ge=%7B
-debounce(
 onChange
 , 20
@@ -1519,15 +1519,8 @@
 ange
-, 2000)
 %7D%3E%0A 
@@ -2121,20 +2121,16 @@
 Url%7D) =%3E
-%0A   
  %5Baddres
@@ -2193,18 +2193,16 @@
 s(%7B%0A    
- 
- 
 onChange
@@ -2226,17 +2226,16 @@
 ions) =%3E
- 
  %7B%0A     
@@ -2231,26 +2231,24 @@
  =%3E %7B%0A      
- 
- 
 props.setMap
@@ -2266,26 +2266,24 @@
 ions)%0A      
- 
- 
 props.histor
@@ -2293,18 +2293,16 @@
 eplace(%0A
-  
         
@@ -2327,16 +2327,27 @@
 nter.lat
+.toFixed(6)
 %7D&lng=$%7B
@@ -2364,16 +2364,27 @@
 nter.lng
+.toFixed(6)
 %7D&zoom=$
@@ -2409,19 +2409,16 @@
     
-  
 )%0A    
-  
 %7D
+,
 %0A  %7D
@@ -2806,16 +2806,17 @@
 Options(
+%7B
 %0A       
@@ -2816,17 +2816,16 @@
         
-%7B
 center: 
@@ -2865,16 +2865,24 @@
 s.lng)%5D,
+%0A       
  zoom: N
@@ -2903,23 +2903,25 @@
 oom)
-%7D
+,
 %0A      
+%7D
 )%0A    %7D
+,
 %0A  %7D

Remove debounce on url, rounding