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 { MAP_DRAWING_MODES } from '../../../constants';
import RadiusIcon from '../../../icons/Radius';
import DrawIcon from '../../../icons/Draw';
import { useStyles } from './styles';
export var ButtonWithTooltip = withTooltip(Button);
var getIcon = function (mode) {
    switch (mode) {
        case MAP_DRAWING_MODES.CIRCLE:
            return RadiusIcon;
        case MAP_DRAWING_MODES.POLYGON:
            return DrawIcon;
        default:
            return null;
    }
};
export var TopRightMapControls = function (_a) {
    var className = _a.className, drawingMode = _a.drawingMode, _b = _a.drawingModes, drawingModes = _b === void 0 ? [] : _b, 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 }))) : (drawingModes.map(function (mode) {
        var Icon = getIcon(mode);
        return (React.createElement(ButtonWithTooltip, { tooltipTitle: i18n.text('Draw area'), key: mode, className: styles.button, onClick: changeDrawingModeTo(mode) },
            React.createElement(Icon, { className: styles.icon })));
    }))));
};
