import { jsxs as _jsxs, Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
import { Flex, IconBox, Text } from '@citric/core';
import { PlusCircle } from '@citric/icons';
import { useTranslate } from '@stack-spot/portal-translate';
import { useConnectionInterfaceConfig } from '../ConnectionInterface.js';
import { RawMultiselectField } from './RawMultiselectField.js';
import { useRequiredConnectionOptions } from './use-required-connection-options.js';
export const RequiredConnectionListField = (props) => {
    const t = useTranslate(dictionary);
    const { isLoading, local, remote } = useRequiredConnectionOptions(props.variable.config.metadata?.input?.connectionInterfaceType);
    const renderLabel = (option) => remote.includes(option) ? option : _jsxs(_Fragment, { children: [option, " ", _jsxs(Text, { colorScheme: "success", children: ["(", t.new, ")"] })] });
    const { onImportPlugin } = useConnectionInterfaceConfig();
    return _jsx(RawMultiselectField, { ...props, showMissingValues: true, options: [...local, ...remote], renderLabel: renderLabel, isLoading: isLoading, actions: onImportPlugin ? [{
                label: t.import,
                element: (_jsxs(Flex, { alignItems: "center", style: { gap: '6px' }, children: [_jsx(IconBox, { colorIcon: "primary.500", children: _jsx(PlusCircle, {}) }), _jsx(Text, { colorScheme: "primary", children: t.import })] })),
                onSelect: onImportPlugin,
            }] : undefined });
};
const dictionary = {
    en: {
        new: 'New',
        import: 'Add connection from a plugin',
    },
    pt: {
        new: 'Novo',
        import: 'Adicionar connection de um plugin',
    },
};
//# sourceMappingURL=RequiredConnectionListField.js.map