import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ActionButton } from '@fluentui/react';
import { memo } from 'react';
import { useSimpleDropdownOptions, useStepDataTable, useTableColumnNames } from '../hooks/index.js';
import { useAddButtonClickedHandler, useSorts } from './Orderby.hooks.js';
import { Container, icons } from './Orderby.styles.js';
/**
 * Provides inputs for an OrderBy step.
 */ export const Orderby = /*#__PURE__*/ memo(function Orderby({ step , graph , input , table , onChange  }) {
    const dataTable = useStepDataTable(step, graph, input, table);
    const columns = useTableColumnNames(dataTable);
    const columnOptions = useSimpleDropdownOptions(columns);
    const sorts = useSorts(step, columnOptions, onChange);
    const handleButtonClick = useAddButtonClickedHandler(dataTable, step, onChange);
    return /*#__PURE__*/ _jsxs(Container, {
        children: [
            sorts,
            /*#__PURE__*/ _jsx(ActionButton, {
                onClick: handleButtonClick,
                iconProps: icons.add,
                disabled: !dataTable,
                children: "Add sort"
            })
        ]
    });
});
