import { jsx as _jsx } from "react/jsx-runtime";
import set from 'lodash-es/set.js';
import { useMemo } from 'react';
import { ColumnSpread } from '../controls/index.js';
export function useColumns(step, onChange) {
    return useMemo(()=>{
        return (step.args.to || []).map((column, index)=>{
            const handleColumnChange = (col)=>{
                const update = {
                    ...step
                };
                set(update, `args.to[${index}]`, col);
                onChange?.(update);
            };
            const handleDeleteClick = ()=>{
                const update = {
                    ...step
                };
                update.args.to.splice(index, 1);
                onChange?.(update);
            };
            return /*#__PURE__*/ _jsx(ColumnSpread, {
                column: column,
                onChange: handleColumnChange,
                onDelete: handleDeleteClick
            }, `column-list-${index}`);
        });
    }, [
        step,
        onChange
    ]);
}
