import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from 'react';
import { Button, Flex, Space, tasty, TooltipProvider } from '@cube-dev/ui-kit';
import { PlayCircleOutlined, ReloadOutlined } from '@ant-design/icons';
import { QueryBuilderError } from './QueryBuilderError';
import { useQueryBuilderContext } from './context';
import { PreAggregationAlerts } from './components/PreAggregationAlerts';
const StopIcon = tasty({
    styles: {
        position: 'relative',
        width: '16px',
        height: '16px',
        '&::before': {
            content: '""',
            display: 'block',
            position: 'absolute',
            top: '2px',
            left: '2px',
            width: '12px',
            height: '12px',
            fill: '#danger',
        },
    },
});
export function QueryBuilderToolBar() {
    const { runQuery, isVerifying, verificationError, isLoading, error, resultSet, isResultOutdated, isQueryEmpty, isApiBlocked, stopQuery, executedQuery, RequestStatusComponent, } = useQueryBuilderContext();
    const { requestId, external, dbType, extDbType, usedPreAggregations = {}, } = useMemo(() => {
        if (resultSet) {
            const { loadResponse } = resultSet?.serialize();
            return loadResponse.results[0] || {};
        }
        return {};
    }, [resultSet]);
    // @ts-ignore
    const preAggregationType = Object.values(usedPreAggregations || {})[0]?.type;
    const isAggregated = Object.keys(usedPreAggregations).length > 0;
    return (_jsxs(Flex, { flow: "column", padding: "1x", gap: "1x", children: [_jsxs(Space, { height: "min-content", placeContent: "space-between", children: [_jsxs(Space, { gap: "1x", children: [_jsx(TooltipProvider, { title: _jsxs(_Fragment, { children: [_jsx("kbd", { children: "\u2318" }), " + ", _jsx("kbd", { children: "Enter" }), " ", _jsx("span", { style: { padding: '0 16px' }, children: "OR" }), ' ', _jsx("kbd", { children: "Ctrl" }), " + ", _jsx("kbd", { children: "Enter" })] }), children: _jsx(Button, { qa: "RunQueryButton", type: "primary", size: "small", isDisabled: isQueryEmpty || !!verificationError || isVerifying || isApiBlocked, isLoading: isLoading, icon: !isQueryEmpty && executedQuery && !isResultOutdated ? (_jsx(ReloadOutlined, {})) : (_jsx(PlayCircleOutlined, {})), onPress: runQuery, children: "Run Query" }) }), isLoading ? (_jsx(Button, { qa: "StopQueryButton", theme: "danger", size: "small", icon: _jsx(StopIcon, {}), onPress: stopQuery, children: "Stop" })) : null] }), requestId && RequestStatusComponent ? (_jsx(RequestStatusComponent, { requestId: requestId, isAggregated: isAggregated, preAggregationType: preAggregationType, external: external, dbType: dbType, extDbType: extDbType, error: error ?? undefined })) : undefined] }), _jsx(PreAggregationAlerts, {}), _jsx(QueryBuilderError, {})] }));
}
//# sourceMappingURL=QueryBuilderToolBar.js.map