import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { PlayCircleOutlined } from '@ant-design/icons';
import { Alert, Block, Button, tasty } from '@cube-dev/ui-kit';
import { QueryRenderer } from '@cubejs-client/react';
import sqlFormatter from 'sql-formatter';
import { CopyButton } from './components/CopyButton';
import { useDeepMemo } from './hooks';
import { useQueryBuilderContext } from './context';
import { ScrollableCodeContainer } from './components/ScrollableCodeContainer';
import { TabPaneWithToolbar } from './components/TabPaneWithToolbar';
const EditSQLQueryButton = tasty(Button, {
    size: 'small',
    icon: _jsx(PlayCircleOutlined, {}),
    children: 'Open in SQL Runner',
});
export function QueryBuilderGeneratedSQL() {
    let { query, queryHash, cubeApi, isQueryEmpty, verificationError, openSqlRunner } = useQueryBuilderContext();
    return useDeepMemo(() => {
        if (!isQueryEmpty) {
            if (verificationError) {
                return (_jsx(Block, { padding: "1x", children: _jsx(Alert, { theme: "danger", children: verificationError.toString() }) }));
            }
            return (_jsx(QueryRenderer, { loadSql: "only", query: query, cubeApi: cubeApi, render: ({ sqlQuery, error }) => {
                    if (error) {
                        return (_jsx(Block, { padding: "1x", children: _jsx(Alert, { theme: "danger", children: error.toString() }) }));
                    }
                    // in the case of a compareDateRange query the SQL will be the same
                    const [query] = Array.isArray(sqlQuery) ? sqlQuery : [sqlQuery];
                    const value = query && sqlFormatter.format(query.sql());
                    return (_jsx(TabPaneWithToolbar, { actions: _jsxs(_Fragment, { children: [_jsx(CopyButton, { type: "secondary", value: value, children: "Copy" }), openSqlRunner ? (_jsx(EditSQLQueryButton, { onPress: () => openSqlRunner?.(value) })) : undefined] }), children: _jsx(ScrollableCodeContainer, { value: value }) }));
                } }));
        }
        else {
            return (_jsx(Block, { padding: "1x", children: _jsx(Alert, { theme: "note", children: "Compose a query to see a generated SQL." }) }));
        }
    }, [queryHash, verificationError]);
}
//# sourceMappingURL=QueryBuilderGeneratedSQL.js.map