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 { ColumnarMenu } from '@essex/themed-components';
import { DefaultButton, Spinner, SpinnerSize } from '@fluentui/react';
import { memo } from 'react';
import { DetailText } from './DetailText.js';
import { useOutputPreview, useTableSelection } from './TableListBar.hooks.js';
import { icons, ListContainer, viewButtonStyles } from './TableListBar.styles.js';
export const TableListBar = /*#__PURE__*/ memo(function TableListBar({ inputs , derived , onSelect , selected , loading  }) {
    const { onClick  } = useOutputPreview(Object.values(derived), onSelect);
    const menuProps = useTableSelection(inputs, derived, selected, onSelect);
    return /*#__PURE__*/ _jsxs(ListContainer, {
        children: [
            /*#__PURE__*/ _jsx(ColumnarMenu, {
                ...menuProps
            }),
            loading && /*#__PURE__*/ _jsx(Spinner, {
                size: SpinnerSize.xSmall
            }),
            derived.length > 0 ? /*#__PURE__*/ _jsx(DefaultButton, {
                styles: viewButtonStyles,
                iconProps: icons.view,
                onClick: onClick,
                children: "View output table"
            }) : null,
            !selected && /*#__PURE__*/ _jsx(DetailText, {
                text: "Select an input or derived table to preview"
            })
        ]
    });
});
