import React from 'react';
import Filter from './Filter';
import ControlZoom from './ControlZoom';
import Position from './Position';
import ToggleViewType from './ToggleViewType';
import { makeStyles, Divider } from '@material-ui/core';
const useStyles = makeStyles(theme => ({
    root: {
        display: 'flex',
        flexDirection: 'row',
    },
    filter: {
        display: 'flex',
        flex: 1,
    },
    divider: {
        marginRight: theme.spacing(2),
        marginLeft: theme.spacing(2),
    },
}));
const MapControls = props => {
    const classes = useStyles();
    const { showLayer1, showLayer2, setShowLayer1, setShowLayer2, value, setZoom, handleSliderChange, handleInputChange, handleBlur, zoomIn, zoomOut, reset, getLocation, changeLat, changeLong, setPosition, displayType, handleChange, } = props;
    return (React.createElement("div", { className: classes.root }, React.createElement("div", { className: classes.filter }, React.createElement(Filter, { showLayer1: showLayer1, showLayer2: showLayer2, setShowLayer1: setShowLayer1, setShowLayer2: setShowLayer2, getLocation: getLocation }), React.createElement(ToggleViewType, { displayType: displayType, handleChange: handleChange })), React.createElement("div", { className: classes.divider }, React.createElement(Divider, { orientation: "vertical" })), React.createElement(Position, { changeLat: changeLat, changeLong: changeLong, setPosition: setPosition }), 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 }))));
};
export default MapControls;
//# sourceMappingURL=MapControls.js.map