import React from 'react';
import { FluentIconButton } from '../../UI/inputs/buttons/FluentIconButton';
import { AlertSolidIcon, HomeIcon, BoxMultiplySolidIcon } from '@fluentui/react-icons';
import { makeStyles, useTheme, lighten } from '@material-ui/core';
const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
        flexDirection: 'row'
    },
    divider: {
        marginRight: theme.spacing(2),
        marginLeft: theme.spacing(2)
    }
}));
const FilterOptions = (props) => {
    const classes = useStyles();
    const { showAlert, showHome, showMarker, toggleDisplayMarkers } = props;
    const theme = useTheme();
    const inactive = lighten(theme.palette.common.black, 0.8);
    return (React.createElement("div", { className: classes.root }, React.createElement(FluentIconButton, { color: "primary", icon: AlertSolidIcon, onClick: () => toggleDisplayMarkers('alert'), style: {
            color: showAlert ? theme.palette.error.main : inactive
        } }), React.createElement(FluentIconButton, { color: "primary", icon: HomeIcon, onClick: () => toggleDisplayMarkers('home'), style: { color: showHome ? theme.palette.success.main : inactive } }), React.createElement(FluentIconButton, { color: "primary", icon: BoxMultiplySolidIcon, onClick: () => toggleDisplayMarkers('mark'), style: { color: showMarker ? theme.palette.success.main : inactive } })));
};
export default FilterOptions;
//# sourceMappingURL=FilterOptions.js.map