var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import React from 'react';
import i18n from 'ui-i18n';
import { components } from 'react-select';
import AddIcon from '@mui/icons-material/Add';
import { useStyles } from './styles';
var ComponentsGroup = components.Group;
export var Group = function (props) {
    var styles = useStyles();
    var _a = props.selectProps, inputValue = _a.inputValue, onCreate = _a.onCreate, canCreateOption = _a.canCreateOption, data = props.data, children = props.children;
    return (React.createElement(ComponentsGroup, __assign({}, props),
        React.createElement("div", { className: styles.groupHeading },
            React.createElement("span", null, data.label),
            onCreate && canCreateOption(data.entityType) && (React.createElement("span", { onClick: function () { return onCreate(inputValue, data.entityType); }, className: styles.addLabel },
                React.createElement(AddIcon, { className: styles.addIcon }),
                inputValue
                    ? i18n.text('Create "${name}" as new ${entityTypeLabel}', {
                        name: inputValue,
                        entityTypeLabel: data.label
                    })
                    : i18n.text('Create new ${entityTypeLabel}', { entityTypeLabel: data.label })))),
        children));
};
