import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useMemo, useCallback, } from 'react';
import { useTranslation } from 'react-i18next';
import { Field } from '../field';
import { LabelledSelect } from '../select';
import { LabelledTextInput } from '../text-input';
import { LabelledNumberInput } from '../number-input';
import { LabelledCheckbox } from '../checkbox';
import { LabelledMultiTextInput } from '../multi-text-input';
import { Panel } from '../panel';
import { useCommander } from '../../../../hooks';
import { deleteValue, setValue } from '../../../../commands';
import { NAMESPACE_EDITOR } from '../../../../providers/schemas-provider/consts';
const TYPES = [
    {
        title: 'string',
        value: 'string',
    },
    {
        title: 'number',
        value: 'number',
    },
    {
        title: 'boolean',
        value: 'boolean',
    },
    {
        title: 'array',
        value: 'array',
    },
];
const TYPES_MAP = {
    string: LabelledTextInput,
    number: LabelledNumberInput,
    boolean: LabelledCheckbox,
    array: LabelledMultiTextInput,
};
const TYPES_INITIAL_VALUES_MAP = {
    string: '',
    number: 0,
    boolean: false,
    array: [],
};
export const Entry = ({ path, id, order, type, }) => {
    const { t } = useTranslation(NAMESPACE_EDITOR);
    const { dispatch } = useCommander();
    const entryPath = useMemo(() => path.concat(`id:${id}`), [path]);
    const namePath = useMemo(() => entryPath.concat('name'), [entryPath]);
    const typePath = useMemo(() => entryPath.concat('type'), [entryPath]);
    const valuePath = useMemo(() => entryPath.concat('value'), [entryPath]);
    const handleDeleteField = useCallback(() => {
        dispatch(deleteValue(entryPath));
    }, [dispatch, entryPath]);
    const handleTypeChange = useCallback((newType) => {
        dispatch(setValue(valuePath, TYPES_INITIAL_VALUES_MAP[newType], true));
    }, [dispatch, valuePath]);
    // comment: It's hard to merge different Input types in one component
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const InputField = TYPES_MAP[type];
    return (_jsxs(Panel, { size: "small", title: t('inspector.multifield.field.title', { index: order + 1 }), onDelete: handleDeleteField, children: [_jsx(Field, { path: namePath, component: LabelledTextInput, label: t('inspector.multifield.field.name.title') }), _jsx(Field, { path: typePath, component: LabelledSelect, label: t('inspector.multifield.field.type.title'), options: TYPES, onAccept: handleTypeChange }), _jsx(Field
            // Reset component on type change to prevent issues with value mismatch
            , { path: valuePath, component: InputField, label: t('inspector.multifield.field.value.title') }, type)] }));
};
