import React from 'react';
import classnames from 'classnames';
import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
import { withTooltip } from '../HOCs/withTooltip';
import { useStyles } from './styles';
var ButtonWithTooltip = withTooltip(Button);
export var ModeSwitcher = function (_a) {
    var className = _a.className, _b = _a.classes, classes = _b === void 0 ? {} : _b, _c = _a.modes, modes = _c === void 0 ? [] : _c, modeId = _a.modeId, onChange = _a.onChange;
    var styles = useStyles();
    var getChangeModeHandler = function (newMode) { return function () { return onChange(newMode); }; };
    return (React.createElement(ButtonGroup, { className: classnames(styles.root, className) }, modes.map(function (_a) {
        var _b;
        var id = _a.id, title = _a.title, tooltipTitle = _a.tooltipTitle, Icon = _a.Icon, disabled = _a.disabled;
        return (React.createElement(ButtonWithTooltip, { disabled: disabled, showForDisabled: disabled && !!tooltipTitle, key: String(id), className: classnames(styles.button, (_b = {}, _b[styles.current] = modeId === id, _b), classes.button), tooltipTitle: tooltipTitle, onClick: getChangeModeHandler(id), "data-reltio-id": "reltio-search-mode-".concat(id) },
            Icon && React.createElement(Icon, { className: styles.icon }),
            title && React.createElement("div", { className: styles.title }, title)));
    })));
};
