<div id="root"></div>

/* layout */

body {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 15px;
}

.row {
	display: flex;
	flex-direction: row;
	width: 100%;
}

.col {
    flex: 1;
	padding: 15px;
}

.row > .col:first-child {
	border-right: 1px solid #ccc;
	max-width: 400px;
}

.row > .col:last-child {
	background: #fafafa;
}

@media all and (max-width: 767px) {
    .row {
        flex-direction: column;
    }

    .row > .col:first-child {
        border-right: none;
        max-width: none;
    }
}

const { Component } = React
const {
	ReactiveBase,
	SelectedFilters,
} = ReactiveSearch;
const {
	ReactiveMap,
	GeoDistanceDropdown,
} = ReactiveMaps;

class MyApp extends Component {
  render () {
    return (
			<ReactiveBase
			app="reactivemap_demo"
			credentials="y4pVxY2Ok:c92481e2-c07f-4473-8326-082919282c18"
			type="meetupdata1"
			mapKey="AIzaSyBQdVcKCe0q_vOBDUvJYpzwGpt_d_uTj4Q"
		>
			<div className="row">
					<div className="col">
					<GeoDistanceDropdown
							title="Location"
							componentId="GeoDistanceDropdown"
							placeholder="Search Location"
							dataField="location"
							unit="mi"
							URLParams
							data={[
				  { distance: 100, label: 'Under 100 miles' },
				  { distance: 200, label: 'Under 200 miles' },
				  { distance: 500, label: 'Under 500 miles' },
				  { distance: 1000, label: 'Under 1000 miles' },
							]}
						/>
    </div>

					<div className="col">
					<SelectedFilters />
					<ReactiveMap
							componentId="map"
							dataField="location"
							defaultMapStyle="Light Monochrome"
							title="Reactive Maps"
							defaultZoom={13}
							defaultCenter={{ lat: 37.74, lng: -122.45 }}
							react={{
				  and: 'GeoDistanceDropdown',
							}}
						/>
    </div>
				</div>
  </ReactiveBase>
	  );
  }
}

ReactDOM.render(
  <MyApp />,
  document.getElementById('root')
);