import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ActionButton, Label } from '@fluentui/react';
import { memo, useCallback } from 'react';
import { TableColumnDropdown } from '../controls/index.js';
import { useDropdownChangeHandler, useSimpleDropdownOptions, useStepDataTable, useTableColumnNames } from '../hooks/index.js';
import { useColumns } from './Spread.hooks.js';
import { Container, labelStyles } from './Spread.styles.js';
/**
 * Provides inputs for a step that needs lists of columns.
 */ export const Spread = /*#__PURE__*/ memo(function Spread({ step , graph , input , table , onChange  }) {
    const dataTable = useStepDataTable(step, graph, input, table);
    const columns = useColumns(step, onChange);
    const handleButtonClick = useCallback(()=>{
        onChange?.({
            ...step,
            args: {
                ...step.args,
                to: [
                    ...step.args.to,
                    next(step.args.to)
                ]
            }
        });
    }, [
        step,
        onChange
    ]);
    const handleColumnChange = useDropdownChangeHandler(step, (s, val)=>s.args.column = val, onChange);
    const colNames = useTableColumnNames(dataTable);
    const options = useSimpleDropdownOptions(colNames);
    return /*#__PURE__*/ _jsxs(Container, {
        children: [
            /*#__PURE__*/ _jsx(TableColumnDropdown, {
                required: true,
                options: options,
                label: 'Column to spread',
                selectedKey: step.args.column,
                onChange: handleColumnChange
            }),
            /*#__PURE__*/ _jsx(Label, {
                styles: labelStyles,
                children: "New column names"
            }),
            columns,
            /*#__PURE__*/ _jsx(ActionButton, {
                onClick: handleButtonClick,
                iconProps: {
                    iconName: 'Add'
                },
                disabled: !dataTable,
                children: "Add column"
            })
        ]
    });
});
function next(columns) {
    return `New column (${columns.length})`;
}
