import React from 'react';
import ControlZoom from './ControlZoom';
import { makeStyles, Divider } from '@material-ui/core';
import FilterOptions from './FilterOptions';
const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
        flexDirection: 'row'
    },
    filter: {
        display: 'flex',
        flex: 1
    },
    divider: {
        marginRight: theme.spacing(2),
        marginLeft: theme.spacing(2)
    }
}));
export const MapFilterBar = (props) => {
    const classes = useStyles();
    const { showAlert, toggleDisplayMarkers, value, setZoom, handleSliderChange, handleInputChange, handleBlur, zoomIn, zoomOut, reset, showHome } = props;
    return (React.createElement("div", { className: classes.root }, React.createElement("div", { className: classes.filter }, React.createElement(FilterOptions, { showAlert: showAlert, showHome: showHome, toggleDisplayMarkers: toggleDisplayMarkers })), React.createElement("div", { className: classes.divider }, React.createElement(Divider, { orientation: "vertical" })), React.createElement("div", { className: classes.divider }, React.createElement(Divider, { orientation: "vertical" })), React.createElement("div", null, React.createElement(ControlZoom, { zoomIn: zoomIn, zoomOut: zoomOut, value: value, setValue: setZoom, handleSliderChange: handleSliderChange, handleInputChange: handleInputChange, handleBlur: handleBlur, reset: reset }))));
};
//# sourceMappingURL=MapFilterBar.js.map