import { jsx as _jsx } from "react/jsx-runtime";
import { memo, useMemo } from 'react';
import { useSimpleDropdownOptions } from '../hooks/index.js';
import { FormInputType, VerbForm } from '../verbForm/VerbForm.js';
/**
 * Just the group/column/op inputs for an aggregation.
 * Input table is expected to be edited elsewhere and configured as the step input.
 */ export const UnfoldBase = /*#__PURE__*/ memo(function UnfoldBase({ step , onChange , columns  }) {
    const options = useSimpleDropdownOptions(columns);
    const inputs = useMemo(()=>[
            {
                type: FormInputType.SingleChoice,
                options,
                label: 'Column used as key',
                placeholder: 'Choose column',
                current: step.args.key,
                required: true,
                onChange: (s, val)=>s.args.key = val
            },
            {
                label: 'Column used as value',
                placeholder: 'Choose column',
                type: FormInputType.SingleChoice,
                options,
                current: step.args.value,
                required: true,
                onChange: (s, val)=>s.args.value = val
            }, 
        ], [
        step,
        options
    ]);
    return /*#__PURE__*/ _jsx(VerbForm, {
        inputs: inputs,
        step: step,
        onChange: onChange
    });
});
