import * as React from 'react';
import { useChartingElements } from './useChartingElements';
import { Box, Flex } from '../../components/Flex';
export const ChartingViewPanel = (props) => {
    const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
    const { chartSelector, containerSelector, chartButton, deleteButton, editButton } = useChartingElements({ elementType, accessLevel: props.accessLevel });
    if (elementType === 'DashboardToolbar') {
        return (React.createElement(Flex, { alignItems: "center", className: "twa:w-full" },
            React.createElement(Box, null, chartSelector),
            containerSelector && React.createElement(Box, { className: "twa:ml-1" }, containerSelector),
            React.createElement(Box, { className: "twa:ml-1" },
                chartButton,
                deleteButton,
                editButton)));
    }
    return (React.createElement(Flex, { flexDirection: "column", className: "twa:w-full" },
        React.createElement(Box, { className: "twa:mb-1" }, chartSelector),
        containerSelector && React.createElement(Box, { className: "twa:mb-1" }, containerSelector),
        React.createElement(Box, null,
            chartButton,
            " ",
            deleteButton,
            " ",
            editButton)));
};
