/*!
 * Copyright (c) Microsoft. All rights reserved.
 * Licensed under the MIT license. See LICENSE file in the project.
 */ import { jsx as _jsx } from "react/jsx-runtime";
import styled from '@essex/styled-components';
import { DefaultButton, useTheme } from '@fluentui/react';
import merge from 'lodash-es/merge.js';
import { useMemo } from 'react';
/**
 * Displays a table name along with a dropdown menu for selection of different tables.
 * @returns
 */ export function tableMenuCommand(tables, selectedKey, onChange, props) {
    const label = chooseLabel(tables, selectedKey);
    return merge({
        key: 'table-dropdown',
        title: label,
        onRender: ()=>/*#__PURE__*/ _jsx(TableMenu, {
                label: label,
                tables: tables,
                onChange: onChange
            })
    }, props);
}
// TODO: this should merge with the menu used in the prepare data table bar
const TableMenu = (props)=>{
    const { tables , label , onChange  } = props;
    const menuProps = useMemo(()=>{
        return {
            items: tables.map((table)=>({
                    key: table.id,
                    text: table.id,
                    onClick: ()=>onChange && onChange(table.id)
                }))
        };
    }, [
        tables,
        onChange
    ]);
    const styles = useStyles();
    return /*#__PURE__*/ _jsx(Container, {
        children: /*#__PURE__*/ _jsx(DefaultButton, {
            text: label,
            menuProps: menuProps,
            styles: styles
        })
    });
};
function useStyles() {
    const theme = useTheme();
    return useMemo(()=>({
            root: {
                background: theme.palette.themePrimary,
                color: theme.palette.white,
                textAlign: 'left',
                border: 'none'
            },
            label: {
                fontWeight: 'normal'
            }
        }), [
        theme
    ]);
}
function chooseLabel(tables, selectedKey) {
    const match = tables.find((t)=>t.id === selectedKey);
    if (match) {
        return match.id;
    }
    return 'Choose table';
}
const Container = styled.div`
	display: flex;
	align-items: center;
`;
