import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Flex, Flow, Panel, tasty } from '@cube-dev/ui-kit';
import { memo, useEffect, useMemo, useRef, useState } from 'react';
import { QUERY_BUILDER_COLOR_TOKENS } from './color-tokens';
import { useAutoSize, useEvent, useLocalStorage } from './hooks';
import { useQueryBuilderContext } from './context';
import { Tabs, Tab } from './components/Tabs';
import { QueryBuilderFilters } from './QueryBuilderFilters';
import { QueryBuilderChart } from './QueryBuilderChart';
import { QueryBuilderResults } from './QueryBuilderResults';
import { QueryBuilderToolBar } from './QueryBuilderToolBar';
import { QueryBuilderGeneratedSQL } from './QueryBuilderGeneratedSQL';
import { QueryBuilderSQL } from './QueryBuilderSQL';
import { QueryBuilderRest } from './QueryBuilderRest';
import { QueryBuilderGraphQL } from './QueryBuilderGraphQL';
import { QueryBuilderSidePanel } from './QueryBuilderSidePanel';
import { QueryBuilderExtras } from './QueryBuilderExtras';
// The minimum size of the area below the top edge of the chart
// when we can show both results and the chart at the same time.
const CHART_THRESHOLD = 448;
const Divider = tasty({
    styles: {
        width: '100%',
        height: '1ow 1ow',
        fill: '#border',
    },
});
const QueryBuilderPanel = tasty(Panel, {
    isFlex: true,
    isStretched: true,
    qa: 'QueryBuilder',
    styles: {
        fill: '#white',
        ...QUERY_BUILDER_COLOR_TOKENS,
    },
});
const QueryBuilderInternals = memo(function QueryBuilderInternals() {
    const { error, resultSet, queryHash, dateRanges } = useQueryBuilderContext();
    const [isChartExpanded, setIsChartExpanded] = useLocalStorage('QueryBuilder:Chart:expanded', false);
    const [tab, setTab] = useState('results');
    const ref = useRef(null);
    const chartRef = useRef(null);
    const [isFiltersExpanded, setIsFiltersExpanded] = useState(true);
    const [chartSize, updateChartSize] = useAutoSize(chartRef, 0);
    const ResultsAndSQL = useMemo(() => {
        return (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsxs(Tabs, { activeKey: tab, extra: _jsx(QueryBuilderExtras, {}), styles: { padding: '0 1x' }, onChange: (tab) => setTab(tab), children: [_jsx(Tab, { keepMounted: true, id: "results", title: "Results", children: _jsx(QueryBuilderResults, { forceMinHeight: !isChartExpanded }) }), _jsx(Tab, { id: "generated-sql", title: "Generated SQL", children: _jsx(QueryBuilderGeneratedSQL, {}) }), _jsx(Tab, { id: "sql", title: "SQL API", children: _jsx(QueryBuilderSQL, {}) }), _jsx(Tab, { id: "json", title: "REST API", children: _jsx(QueryBuilderRest, {}) }), _jsx(Tab, { id: "graphql", title: "GraphQL API", children: _jsx(QueryBuilderGraphQL, {}) })] })] }));
    }, [tab, isChartExpanded]);
    const onToggle = useEvent((isExpanded) => {
        setIsFiltersExpanded(isExpanded);
    });
    useEffect(() => {
        updateChartSize();
        setTimeout(() => {
            updateChartSize();
        }, 200);
    }, [isChartExpanded, isFiltersExpanded, error, queryHash, dateRanges.list.length, resultSet]);
    return (_jsxs(QueryBuilderPanel, { children: [_jsx(QueryBuilderSidePanel, {}), _jsxs(Panel, { ref: ref, gridRows: "min-content min-content minmax(0, 1fr)", children: [useMemo(() => (_jsxs(_Fragment, { children: [_jsx(QueryBuilderToolBar, {}), _jsx(Divider, {})] })), []), _jsxs(Panel, { gridRows: "min-content min-content min-content min-content min-content minmax(0, 1fr)", children: [useMemo(() => (_jsxs(_Fragment, { children: [_jsx(QueryBuilderFilters, { onToggle: onToggle }), _jsx(Divider, {})] })), []), useMemo(() => {
                                return (_jsxs(_Fragment, { children: [_jsx("div", { ref: chartRef, children: _jsx(QueryBuilderChart, { onToggle: setIsChartExpanded }) }), !isChartExpanded || chartSize > CHART_THRESHOLD ? (ResultsAndSQL) : (_jsxs(Flow, { children: [_jsx(Divider, {}), _jsx(Flex, { padding: ".5x", placeContent: "end", children: _jsx(QueryBuilderExtras, {}) })] }))] }));
                            }, [isChartExpanded, chartSize, ResultsAndSQL])] })] })] }));
});
export { QueryBuilderInternals };
//# sourceMappingURL=QueryBuilderInternals.js.map