import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { IconButton } from '@fluentui/react';
import { useMemo } from 'react';
import { TableDropdown } from '../controls/index.js';
import { useSimpleDropdownOptions, useTableNames } from '../hooks/index.js';
import { LeftAlignedRow } from '../styles.js';
import { icons } from './SetOperation.styles.js';
export function useOthers(step, onChange, store) {
    const tableNames = useTableNames(store);
    const tableOptions = useSimpleDropdownOptions(tableNames);
    return useMemo(()=>{
        return (step.input.others || EMPTY).map((input, index)=>{
            const other = input.node;
            // on delete, remove the input
            const handleDeleteClick = ()=>{
                onChange?.({
                    ...step,
                    input: {
                        ...step.input,
                        others: (step.input.others || EMPTY).filter((o)=>o !== input)
                    }
                });
            };
            if (!store) {
                return null;
            }
            return /*#__PURE__*/ _jsxs(LeftAlignedRow, {
                children: [
                    /*#__PURE__*/ _jsx(TableDropdown, {
                        label: '',
                        options: tableOptions,
                        selectedKey: other,
                        onChange: (_evt, option)=>{
                            const update = {
                                ...step
                            };
                            if (option) {
                                input.node = `${option.key}`;
                            }
                            onChange?.(update);
                        }
                    }),
                    /*#__PURE__*/ _jsx(IconButton, {
                        title: 'Remove this table',
                        iconProps: icons.delete,
                        onClick: handleDeleteClick
                    })
                ]
            }, `set-op-${other}-${index}`);
        });
    }, [
        step,
        store,
        tableOptions,
        onChange
    ]);
}
const EMPTY = [];
