{"ast":null,"code":"import { 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\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = 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\nconst Marker = ({\n  title,\n  color,\n  onMouseEvent,\n  highlight\n}) => {\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\nconst CityMarker = props => {\n  const {\n    available\n  } = props,\n        rest = _objectWithoutProperties(props, [\"available\"]);\n\n  return /*#__PURE__*/_jsx(Marker, _objectSpread(_objectSpread({}, props), {}, {\n    color: available ? 'black' : 'grey'\n  }));\n};\n\nconst HouseMarker = props => {\n  return /*#__PURE__*/_jsx(Marker, _objectSpread({}, props));\n};\n\nconst 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\nconst MapContainer = ({\n  center = {\n    lat: 46.711,\n    lng: 1.719\n  },\n  zoom = 7,\n  centerOnFrance,\n  cities,\n  houses,\n  handleMouseEvent,\n  highlightCity,\n  highlightHouse,\n  centerOn,\n  overlayKey,\n  overlay\n}) => {\n  // TODO: get api key from client; hide?\n  const apiKey = 'AIzaSyB3NIuO8CT1qZEx3H_gb5sd-z64a7gadJg';\n  const filteredCities = cities && cities.filter(city => !!city.geolocation);\n  const filteredHouses = houses && houses.filter(house => !!house.geolocation);\n  const {\n    0: map,\n    1: setMap\n  } = useState(null);\n  const onMapLoaded = useCallback(({\n    map,\n    maps\n  }) => {\n    let latLngBounds = new google.maps.LatLngBounds();\n\n    if (centerOnFrance) {\n      franceBounds.forEach(item => latLngBounds.extend(new google.maps.LatLng(item.lat, item.lng)));\n    } else {\n      filteredCities && filteredCities.forEach(item => latLngBounds.extend(new google.maps.LatLng(item.geolocation.lat, item.geolocation.lng)));\n      filteredHouses && filteredHouses.forEach(item => latLngBounds.extend(new google.maps.LatLng(item.geolocation.lat, item.geolocation.lng)));\n    }\n\n    map.fitBounds(latLngBounds);\n    setMap(map);\n  }, [centerOnFrance, filteredCities, filteredHouses]);\n  useEffect(() => {\n    if (map && centerOn && centerOn != '') {\n      const onCity = filteredCities && filteredCities.filter(item => item.slug == centerOn);\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  const mapOptions = useCallback(map => ({\n    scrollwheel: false,\n    styles: googleMapStyles\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 && (event => handleMouseEvent('mapClick', null)) //yesIWantToUseGoogleMapApiInternals\n        ,\n        children: [map && filteredCities && filteredCities.map(markerInfos => /*#__PURE__*/_jsx(CityMarker, {\n          lat: markerInfos.geolocation.lat,\n          lng: markerInfos.geolocation.lng,\n          title: markerInfos.title,\n          available: markerInfos.open,\n          onMouseEvent: handleMouseEvent && (event => handleMouseEvent(event.type, markerInfos.slug)),\n          highlight: highlightCity == markerInfos.slug\n        }, markerInfos.slug)), map && filteredHouses && filteredHouses.map(markerInfos => /*#__PURE__*/_jsx(HouseMarker, {\n          lat: markerInfos.geolocation.lat,\n          lng: markerInfos.geolocation.lng,\n          title: markerInfos.title,\n          color: markerInfos.statusColor,\n          onMouseEvent: handleMouseEvent && (event => handleMouseEvent(event.type, markerInfos.slug)),\n          highlight: highlightHouse == markerInfos.slug\n        }, markerInfos.slug))]\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"}