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, } from 'react';
import { useTranslation } from 'react-i18next';
import { Field } from '../field';
import { DependencyField } from '../dependency-field';
import { formatWidgetName } from '../../../../../utils/format-widget-name';
import { fieldTypes } from './field-types';
export const WidgetField = ({ field, path }) => {
    const { name, type, title, dependency, initialValue } = field, properties = __rest(field, ["name", "type", "title", "dependency", "initialValue"]);
    const { t } = useTranslation();
    const dependencyPath = useMemo(() => (dependency ? path.concat(dependency.name.split('.')) : void 0), [path, dependency]);
    const fieldPath = useMemo(() => path.concat(name.split('.')), [path, name]);
    if (dependency && dependencyPath) {
        return (_jsx(DependencyField, Object.assign({ path: fieldPath, label: title ? t(title) : formatWidgetName(name), component: fieldTypes[type] ? fieldTypes[type] : fieldTypes.string, dependencyPath: dependencyPath, dependencyValue: dependency.value }, properties)));
    }
    return (_jsx(Field, Object.assign({ path: fieldPath, label: title ? t(title) : formatWidgetName(name), component: fieldTypes[type] ? fieldTypes[type] : fieldTypes.string }, properties)));
};
