/*!
 * Copyright (c) Microsoft. All rights reserved.
 * Licensed under the MIT license. See LICENSE file in the project.
 */ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ActionButton, Label } 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, Sorts } from './Orderby.styles.js';
/**
 * Provides inputs for an OrderBy step.
 */ export const Orderby = /*#__PURE__*/ memo(function Orderby({ step , workflow , input , table , onChange  }) {
    const dataTable = useStepDataTable(step, workflow, 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: [
            /*#__PURE__*/ _jsx(Label, {
                required: true,
                children: "Sorts"
            }),
            /*#__PURE__*/ _jsx(Sorts, {
                children: sorts
            }),
            /*#__PURE__*/ _jsx(ActionButton, {
                onClick: handleButtonClick,
                iconProps: icons.add,
                disabled: !dataTable,
                children: "Add sort"
            })
        ]
    });
});
