import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Grid, Title, Paragraph, tasty } from '@cube-dev/ui-kit';
import { PlaygroundChartRenderer } from './components/ChartRenderer';
const MAX_HEIGHT = 350;
const MAX_SERIES_LIMIT = 25;
const ChartContainer = tasty({
    qa: 'QueryBuilderChart',
    styles: {
        overflow: 'hidden',
        padding: '1x 1x 0 0',
        styledScrollbar: true,
    },
});
export function QueryBuilderChartResults({ resultSet, isLoading, query, pivotConfig, chartType, isExpanded, containerRef, overflow = 'clip', }) {
    const isChartTooBig = resultSet && resultSet?.seriesNames(pivotConfig).length > MAX_SERIES_LIMIT;
    if (resultSet && !isLoading && isExpanded) {
        if (isChartTooBig) {
            return (_jsxs(Grid, { height: MAX_HEIGHT, columns: "auto", placeContent: "center", placeItems: "center", gap: "2x", children: [_jsx(Title, { level: 3, gridArea: false, children: "The chart is too big to display" }), _jsx(Paragraph, { children: "There are too many sets of data to display on a single chart. Try to reduce the number of dimensions." })] }));
        }
        else {
            return (_jsx(ChartContainer, { ref: containerRef, style: {
                    maxHeight: MAX_HEIGHT,
                    height: MAX_HEIGHT,
                    overflow,
                }, children: _jsx(PlaygroundChartRenderer, { query: query, chartType: chartType, resultSet: resultSet, pivotConfig: pivotConfig, chartHeight: MAX_HEIGHT - 20 }) }));
        }
    }
    else if (!isLoading && isExpanded) {
        return (_jsxs(Grid, { height: MAX_HEIGHT, columns: "auto", placeContent: "center", placeItems: "center", gap: "2x", children: [_jsx(Title, { level: 3, gridArea: false, children: "No results available" }), _jsx(Paragraph, { children: "Compose and run a query to see the results." })] }));
    }
    return null;
}
//# sourceMappingURL=QueryBuilderChartResults.js.map