import React, { useState, useEffect } from 'react';
import { TextField } from '@material-ui/core';
import { IconButtonWithTooltip } from '../buttons/IconButtonWithToolTip';
import { AddIcon } from '@fluentui/react-icons';
import { Field } from '../../../utilities/form';
export const KeyValueTextField = (props) => {
    const { previousValues, fieldName } = props;
    const [numFields, setNumFields] = useState(1);
    const addField = () => {
        setNumFields(numFields + 1);
    };
    useEffect(() => {
        if (previousValues) {
            const numPrevValues = Object.keys(previousValues).length;
            setNumFields(numPrevValues);
        }
    }, [previousValues]);
    return (React.createElement("div", null, Array.from({ length: numFields }).map((_, index) => (React.createElement("div", { key: index, style: { display: 'flex', gap: 5 } }, React.createElement(Field, { component: TextField, id: `${fieldName}Key${index + 1}`, name: `${fieldName}Key${index + 1}`, label: `Parameter Name ${index + 1}`, variant: "filled", size: "small", required: false, fullWidth: true, initialValue: previousValues && Object.keys(previousValues)[index] }), React.createElement(Field, { component: TextField, id: `${fieldName}Value${index + 1}`, name: `${fieldName}Value${index + 1}`, label: `Value ${index + 1}`, variant: "filled", size: "small", required: false, fullWidth: true, initialValue: previousValues && Object.values(previousValues)[index] })))), React.createElement("div", { style: { display: 'flex', justifyContent: 'right' } }, React.createElement(IconButtonWithTooltip, { icon: AddIcon, onClick: addField, title: "Add field" }))));
};
//# sourceMappingURL=KeyValueTextField.js.map