var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import { useMemo, useContext } from 'react';
import { useTranslation } from 'react-i18next';
import { useStore, useConfig } from '../../../../../../hooks';
import { LabelledMultiSelect } from '../../../multi-select';
import { WidgetFieldContext } from '../../widget-field-context';
export const MultiSelectField = (_a) => {
    var { options, value } = _a, props = __rest(_a, ["options", "value"]);
    const { t } = useTranslation();
    const store = useStore();
    const context = useContext(WidgetFieldContext);
    const projectConfig = useConfig([]);
    const formattedOptions = useMemo(() => {
        const list = typeof options === 'function'
            ? options((path) => store.get(path), context)
            : options;
        return list.map((option) => typeof option !== 'object'
            ? { title: String(option), value: option }
            : { title: t(option.title), value: option.value });
    }, [store, context, options, projectConfig]);
    const formattedValue = useMemo(() => {
        return value.map((entry, index) => {
            const option = formattedOptions.find((opt) => opt.value === entry);
            return option
                ? entry
                : `${t('inspector.components.select.option.none.title')} ${index + 1}`;
        });
    }, [value, formattedOptions]);
    return (_jsx(LabelledMultiSelect, Object.assign({ options: formattedOptions, value: formattedValue }, props)));
};
