import React from 'react';
import classnames from 'classnames';
import i18n from 'ui-i18n';
import Button from '@mui/material/Button';
import { withTooltip } from '../../../HOCs/withTooltip';
import HighlightOffIcon from '@mui/icons-material/HighlightOff';
import { POLYGON_DRAWING_MODE } from '../../../constants';
import DrawIcon from '../../../icons/Draw';
import { useStyles } from './styles';
export var ButtonWithTooltip = withTooltip(Button);
export var TopRightMapControls = function (_a) {
    var className = _a.className, drawingMode = _a.drawingMode, enablePolygonDrawing = _a.enablePolygonDrawing, hasActiveOverlay = _a.hasActiveOverlay, onDrawingModeChanged = _a.onDrawingModeChanged, onClearOverlay = _a.onClearOverlay;
    var styles = useStyles();
    var changeDrawingModeTo = function (drawingMode) { return function () {
        onDrawingModeChanged(drawingMode);
    }; };
    return (React.createElement("div", { className: classnames(styles.container, className) }, drawingMode || hasActiveOverlay ? (React.createElement(ButtonWithTooltip, { tooltipTitle: i18n.text('Clear area'), className: styles.button, onClick: hasActiveOverlay ? onClearOverlay : changeDrawingModeTo(null) },
        React.createElement(HighlightOffIcon, { className: styles.icon }))) : (enablePolygonDrawing && (React.createElement(ButtonWithTooltip, { tooltipTitle: i18n.text('Draw area'), className: styles.button, onClick: changeDrawingModeTo(POLYGON_DRAWING_MODE) },
        React.createElement(DrawIcon, { className: styles.icon }))))));
};
