import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { PlusOutlined } from '@ant-design/icons';
import { useCallback } from 'react';
import MemberDropdown from './MemberDropdown';
import RemoveButtonGroup from './RemoveButtonGroup';
import { SectionRow } from '../components';
import MissingMemberTooltip from './MissingMemberTooltip';
export default function MemberGroup({ disabled = false, members, availableMembers, missingMembers, addMemberName, updateMethods, }) {
    const handleClick = useCallback((m) => updateMethods.add(m), []);
    return (_jsxs(SectionRow, { className: "cube-section", children: [members.map((m) => {
                const isMissing = missingMembers.includes(m.title);
                const buttonGroup = (_jsx(RemoveButtonGroup, { disabled: disabled, className: disabled ? 'disabled' : null, color: isMissing ? 'danger' : 'primary', onRemoveClick: () => updateMethods.remove(m), children: _jsx(MemberDropdown, { disabled: disabled, availableCubes: availableMembers, onClick: (updateWith) => updateMethods.update(m, updateWith), children: m.title }) }, m.index || m.name));
                return isMissing ? (_jsx(MissingMemberTooltip, { children: buttonGroup }, m.index || m.name)) : (buttonGroup);
            }), _jsx(MemberDropdown, { "data-testid": addMemberName, disabled: disabled, availableCubes: availableMembers, type: "dashed", icon: _jsx(PlusOutlined, {}), onClick: handleClick, children: !members.length ? addMemberName : null })] }));
}
//# sourceMappingURL=MemberGroup.js.map