import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*!
 * Copyright (c) Microsoft. All rights reserved.
 * Licensed under the MIT license. See LICENSE file in the project.
 */ import { ActionButton, Label } from '@fluentui/react';
import { memo, useCallback } from 'react';
import { useStepDataTable } from '../hooks/useStepDataTable.js';
import { useOthers } from './SetOperation.hooks.js';
import { Container, icons, Tables } from './SetOperation.styles.js';
/**
 * Provides inputs to create a list of tables.
 * E.g., for set operations
 */ export const SetOperation = /*#__PURE__*/ memo(function SetOperation({ step , graph , input , table , onChange  }) {
    const dataTable = useStepDataTable(step, graph, input, table);
    const others = useOthers(step, onChange, graph);
    const handleButtonClick = useCallback(()=>{
        onChange?.({
            ...step,
            input: {
                ...step.input,
                others: [
                    ...step.input.others || [],
                    {
                        node: ''
                    }
                ]
            }
        });
    }, [
        step,
        onChange
    ]);
    return /*#__PURE__*/ _jsxs(Container, {
        children: [
            /*#__PURE__*/ _jsx(Label, {
                children: "With tables"
            }),
            /*#__PURE__*/ _jsx(Tables, {
                children: others
            }),
            /*#__PURE__*/ _jsx(ActionButton, {
                onClick: handleButtonClick,
                iconProps: icons.add,
                disabled: !dataTable,
                children: "Add table"
            })
        ]
    });
});
