import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/* eslint-disable react/display-name */
import { IconBox, Input, Text } from '@citric/core';
import { Code, Filter } from '@citric/icons';
import { FieldAddon, FieldGroup } from '@citric/ui';
import { useTranslate } from '@stack-spot/portal-translate';
import { forwardRef, useMemo, useState } from 'react';
import { useContextVariables } from '../VariablesContext.js';
export const VariableSelector = forwardRef(({ pattern, onSelect }, ref) => {
    const t = useTranslate(dictionary);
    const variables = useContextVariables();
    const [search, setSearch] = useState('');
    const [accountItems, stackspotItems] = useMemo(() => {
        const accountItems = [];
        const stackspotItems = [];
        for (const name in variables) {
            const variable = variables[name];
            if ((!pattern || `${variable.get()}`.match(`^${pattern}$`)) &&
                (variable.path.includes(search) || variable.metadata?.description?.includes(search))) {
                const items = ['account', 'workspace'].includes(variable.metadata?.source ?? '') ? accountItems : stackspotItems;
                items.push(_jsx("li", { children: _jsxs("button", { onClick: () => onSelect(`{{ ${variable.path} }}`), children: [_jsx(IconBox, { size: "xs", children: _jsx(Code, {}) }), _jsxs("div", { className: "variable-data", children: [_jsx(Text, { children: variable.path }), _jsx(Text, { appearance: "microtext1", colorScheme: "light.700", children: `${variable.get()}` })] })] }) }, variable.path));
            }
        }
        return [accountItems, stackspotItems];
    }, [pattern, search, variables]);
    return (_jsxs("div", { ref: ref, className: "variable-selector", children: [_jsxs(FieldGroup, { className: "search", children: [_jsx(FieldAddon, { children: _jsx(IconBox, { size: "sm", colorIcon: "light.700", children: _jsx(Filter, {}) }) }), _jsx(Input, { value: search, placeholder: t.filter, onChange: (e) => setSearch(e.target.value), maxLength: 255 })] }), !!accountItems?.length && _jsxs("section", { children: [_jsx(Text, { appearance: "h5", children: t.account }), _jsx("ul", { children: accountItems })] }), !!stackspotItems?.length && _jsxs("section", { children: [_jsx(Text, { appearance: "h5", children: t.stackspot }), _jsx("ul", { children: stackspotItems })] }), !accountItems.length && !stackspotItems.length && _jsx(Text, { colorScheme: "light.700", align: "center", mb: "16px", children: t.noVariables })] }));
});
const dictionary = {
    en: {
        account: 'Account variables',
        stackspot: 'StackSpot variables',
        filter: 'Filter variables',
        noVariables: 'There are no variables available.',
    },
    pt: {
        account: 'Variáveis da conta',
        stackspot: 'Variáveis StackSpot',
        filter: 'Filtrar variáveis',
        noVariables: 'Não há variáveis disponíveis.',
    },
};
//# sourceMappingURL=VariableSelector.js.map