import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useCallback, } from 'react';
import { useTranslation } from 'react-i18next';
import { Button } from 'antd';
import { v4 as uuidv4 } from 'uuid';
import { useConfig, useCommander } from '../../../../hooks';
import { addValue } from '../../../../commands';
import { NAMESPACE_EDITOR } from '../../../../providers/schemas-provider/consts';
import { Entry } from './entry';
import { MultiFieldStyled, FieldsStyled, NoFieldsStyled, FieldStyled, ButtonCSS, } from './multi-field.style';
export const MultiField = ({ path }) => {
    const { t } = useTranslation(NAMESPACE_EDITOR);
    const { dispatch } = useCommander();
    const values = useConfig(path);
    const handleAddField = useCallback(() => {
        dispatch(addValue(path, {
            id: uuidv4(),
            name: '',
            type: 'string',
            value: '',
        }));
    }, [dispatch, path]);
    return (_jsxs(MultiFieldStyled, { children: [!values.length && (_jsx(NoFieldsStyled, { children: t('inspector.multifield.noFields.title') })), Boolean(values.length) && (_jsx(FieldsStyled, { children: values.map((entry, index) => (_jsx(FieldStyled, { children: _jsx(Entry, { path: path, id: entry.id, type: entry.type, order: index }) }, entry.id))) })), _jsx(Button, { css: ButtonCSS, size: "small", onClick: handleAddField, children: t('inspector.multifield.addNew.value.title') })] }));
};
