{"ast":null,"code":"import _defineProperty from \"@babel/runtime/helpers/esm/defineProperty\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nimport { useCallback, useEffect, useState } from 'react';\nimport GoogleMapReact from 'google-map-react';\nimport cn from 'classnames';\nimport styles from './MapContainer.module.scss';\nimport googleMapStyles from './googleMapStyles.json';\n\nvar Marker = function Marker(_ref) {\n  var title = _ref.title,\n      color = _ref.color,\n      onMouseEvent = _ref.onMouseEvent,\n      highlight = _ref.highlight;\n  return /*#__PURE__*/_jsx(\"div\", {\n    onMouseOver: onMouseEvent,\n    onMouseOut: onMouseEvent,\n    onClick: onMouseEvent,\n    className: cn(styles.marker, highlight && styles.highlight),\n    children: /*#__PURE__*/_jsx(\"span\", {\n      className: cn(styles.dot, color && styles[color])\n    })\n  });\n};\n\nvar CityMarker = function CityMarker(props) {\n  var available = props.available,\n      rest = _objectWithoutProperties(props, [\"available\"]);\n\n  return /*#__PURE__*/_jsx(Marker, _objectSpread(_objectSpread({}, props), {}, {\n    color: available ? 'black' : 'grey'\n  }));\n};\n\nvar HouseMarker = function HouseMarker(props) {\n  return /*#__PURE__*/_jsx(Marker, _objectSpread({}, props));\n};\n\nvar franceBounds = [{\n  lat: 49.5,\n  lng: 2.1\n}, {\n  lat: 48.5,\n  lng: 7.2\n}, {\n  lat: 43.7,\n  lng: 2.8\n}, {\n  lat: 47.8,\n  lng: -3\n}];\n\nvar MapContainer = function MapContainer(_ref2) {\n  var _ref2$center = _ref2.center,\n      center = _ref2$center === void 0 ? {\n    lat: 46.711,\n    lng: 1.719\n  } : _ref2$center,\n      _ref2$zoom = _ref2.zoom,\n      zoom = _ref2$zoom === void 0 ? 7 : _ref2$zoom,\n      centerOnFrance = _ref2.centerOnFrance,\n      cities = _ref2.cities,\n      houses = _ref2.houses,\n      handleMouseEvent = _ref2.handleMouseEvent,\n      highlightCity = _ref2.highlightCity,\n      highlightHouse = _ref2.highlightHouse,\n      centerOn = _ref2.centerOn,\n      overlayKey = _ref2.overlayKey,\n      overlay = _ref2.overlay;\n  // TODO: get api key from client; hide?\n  var apiKey = 'AIzaSyB3NIuO8CT1qZEx3H_gb5sd-z64a7gadJg';\n  var filteredCities = cities && cities.filter(function (city) {\n    return !!city.geolocation;\n  });\n  var filteredHouses = houses && houses.filter(function (house) {\n    return !!house.geolocation;\n  });\n\n  var _useState = useState(null),\n      map = _useState[0],\n      setMap = _useState[1];\n\n  var onMapLoaded = useCallback(function (_ref3) {\n    var map = _ref3.map,\n        maps = _ref3.maps;\n    var latLngBounds = new google.maps.LatLngBounds();\n\n    if (centerOnFrance) {\n      franceBounds.forEach(function (item) {\n        return latLngBounds.extend(new google.maps.LatLng(item.lat, item.lng));\n      });\n    } else {\n      filteredCities && filteredCities.forEach(function (item) {\n        return latLngBounds.extend(new google.maps.LatLng(item.geolocation.lat, item.geolocation.lng));\n      });\n      filteredHouses && filteredHouses.forEach(function (item) {\n        return latLngBounds.extend(new google.maps.LatLng(item.geolocation.lat, item.geolocation.lng));\n      });\n    }\n\n    map.fitBounds(latLngBounds);\n    setMap(map);\n  }, [centerOnFrance, filteredCities, filteredHouses]);\n  useEffect(function () {\n    if (map && centerOn && centerOn != '') {\n      var onCity = filteredCities && filteredCities.filter(function (item) {\n        return item.slug == centerOn;\n      });\n\n      if (onCity && onCity.length) {\n        map.panTo(new google.maps.LatLng(onCity[0].geolocation.lat - 2, onCity[0].geolocation.lng));\n      } // const onHouse = filteredHouses && filteredHouses.filter(item => item.slug == centerOn)\n      // if(onHouse && onHouse.length) {\n      // \tmap.panTo(new google.maps.LatLng(onHouse[0].geolocation.lat, onHouse[0].geolocation.lng))\n      // }\n\n    }\n  }, [map, centerOn]);\n  var mapOptions = useCallback(function (map) {\n    return {\n      scrollwheel: false,\n      styles: googleMapStyles\n    };\n  }, []);\n  return (\n    /*#__PURE__*/\n    // Important! Always set the container height explicitly\n    _jsxs(\"div\", {\n      className: cn(styles.mapContainer),\n      children: [/*#__PURE__*/_jsxs(GoogleMapReact, {\n        bootstrapURLKeys: {\n          key: apiKey\n        },\n        defaultCenter: center,\n        defaultZoom: zoom,\n        onGoogleApiLoaded: onMapLoaded,\n        options: mapOptions,\n        gestureHandling: 'none',\n        onClick: handleMouseEvent && function (event) {\n          return handleMouseEvent('mapClick', null);\n        } //yesIWantToUseGoogleMapApiInternals\n        ,\n        children: [map && filteredCities && filteredCities.map(function (markerInfos) {\n          return /*#__PURE__*/_jsx(CityMarker, {\n            lat: markerInfos.geolocation.lat,\n            lng: markerInfos.geolocation.lng,\n            title: markerInfos.title,\n            available: markerInfos.open,\n            onMouseEvent: handleMouseEvent && function (event) {\n              return handleMouseEvent(event.type, markerInfos.slug);\n            },\n            highlight: highlightCity == markerInfos.slug\n          }, markerInfos.slug);\n        }), map && filteredHouses && filteredHouses.map(function (markerInfos) {\n          return /*#__PURE__*/_jsx(HouseMarker, {\n            lat: markerInfos.geolocation.lat,\n            lng: markerInfos.geolocation.lng,\n            title: markerInfos.title,\n            color: markerInfos.statusColor,\n            onMouseEvent: handleMouseEvent && function (event) {\n              return handleMouseEvent(event.type, markerInfos.slug);\n            },\n            highlight: highlightHouse == markerInfos.slug\n          }, markerInfos.slug);\n        })]\n      }), overlay && /*#__PURE__*/_jsx(\"div\", {\n        className: cn(styles.overlay),\n        children: overlay\n      }, overlayKey)]\n    })\n  );\n};\n\nexport default MapContainer;","map":null,"metadata":{},"sourceType":"module"}