import { jsx as _jsx } from "react/jsx-runtime";
import { memo, useMemo } from 'react';
import { FormInputType, VerbForm } from '../verbForm/VerbForm.js';
import { inputColumnList } from '../verbForm/VerbFormFactories.js';
/**
 * Provides inputs for a step that needs lists of columns.
 */ export const FoldBase = /*#__PURE__*/ memo(function FoldBase({ step , columns , onChange  }) {
    const inputs = useMemo(()=>[
            inputColumnList(step, columns),
            {
                label: 'Key name to use',
                placeholder: 'Key name to use',
                type: FormInputType.Text,
                required: true,
                current: step.args.to ? step.args.to[0] : '',
                onChange: (s, val)=>s.args.to[0] = val
            },
            {
                label: 'Value name to use',
                placeholder: 'Value name to use',
                type: FormInputType.Text,
                required: true,
                current: step.args.to ? step.args.to[1] : '',
                onChange: (s, val)=>s.args.to[1] = val
            }, 
        ], [
        step,
        columns
    ]);
    return /*#__PURE__*/ _jsx(VerbForm, {
        inputs: inputs,
        step: step,
        onChange: onChange
    });
});
