import React from 'react';
import { makeStyles, Divider } from '@material-ui/core';
import { FluentIconButton } from '../../../UI/inputs/buttons/FluentIconButton';
import { ZoomInIcon, ZoomOutIcon, ZoomToFitIcon } from '@fluentui/react-icons';
import FluentInputSlider from '../../../UI/inputs/sliders/FluentInputSlider';
const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
        flexDirection: 'row'
    },
    divider: {
        marginRight: theme.spacing(2),
        marginLeft: theme.spacing(2)
    }
}));
const ControlZoom = (props) => {
    const { zoomIn, zoomOut, value, handleSliderChange, handleInputChange, handleBlur, reset } = props;
    const classes = useStyles();
    return (React.createElement("div", { className: classes.root }, React.createElement("div", null, React.createElement(FluentIconButton, { onClick: zoomIn, color: "primary", icon: ZoomInIcon }), React.createElement(FluentIconButton, { onClick: zoomOut, color: "primary", icon: ZoomOutIcon })), React.createElement("div", { className: classes.divider }, React.createElement(Divider, { orientation: "vertical" })), React.createElement("div", null, React.createElement(FluentInputSlider, { value: value, handleSliderChange: handleSliderChange, handleInputChange: handleInputChange, handleBlur: handleBlur })), React.createElement("div", { className: classes.divider }, React.createElement(Divider, { orientation: "vertical" })), React.createElement("div", null, React.createElement(FluentIconButton, { onClick: reset, color: "primary", icon: ZoomToFitIcon })), React.createElement("div", { className: classes.divider }, React.createElement(Divider, { orientation: "vertical" }))));
};
export default ControlZoom;
//# sourceMappingURL=ControlZoom.js.map