import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect } from 'react';
import { QueryRenderer } from '@cubejs-client/react';
import { format } from 'sql-formatter';
import PrismCode from '../PrismCode';
import { FatalError } from '../components/Error/FatalError';
function SqlEmitter({ sql, loading, onChange }) {
    useEffect(() => {
        onChange({ sql, loading });
    }, [sql, loading]);
    return null;
}
export default function SqlQueryTab({ query, onChange }) {
    return (_jsx(QueryRenderer, { loadSql: "only", query: query, render: ({ sqlQuery, loadingState, error }) => {
            if (error) {
                return _jsx(FatalError, { error: error });
            }
            // in the case of a compareDateRange query the SQL will be the same
            const [query] = Array.isArray(sqlQuery) ? sqlQuery : [sqlQuery];
            const value = query && format(query.sql());
            return (_jsxs(_Fragment, { children: [_jsx(PrismCode, { code: value }), _jsx(SqlEmitter, { loading: loadingState.isLoading, sql: value, onChange: ({ sql, loading }) => {
                            onChange({
                                loading,
                                value: sql,
                            });
                        } })] }));
        } }));
}
//# sourceMappingURL=SqlQueryTab.js.map