import React, { useRef, useEffect, useCallback } from 'react';
import '../types.js';
import { formatSQL } from '../utils/formatSQL.js';
import { SQLEditor } from '../../SQLEditor/components/SQLEditor.js';
import '@grafana/ui';
import '@grafana/data';
import '../../SQLEditor/standardSql/language.js';
import '../../SQLEditor/standardSql/macros.js';

function QueryEditorRaw({
  children,
  onChange,
  query,
  width,
  height,
  completionProvider,
  language = "sql"
}) {
  const queryRef = useRef(query);
  useEffect(() => {
    queryRef.current = query;
  }, [query]);
  const onRawQueryChange = useCallback(
    (rawSql, processQuery) => {
      const newQuery = {
        ...queryRef.current,
        rawQuery: true,
        rawSql
      };
      onChange(newQuery, processQuery);
    },
    [onChange]
  );
  return /* @__PURE__ */ React.createElement(
    SQLEditor,
    {
      width,
      height,
      query: query.rawSql,
      onChange: onRawQueryChange,
      language: { id: "sql", completionProvider, formatter: (q) => formatSQL(q, language) }
    },
    children
  );
}

export { QueryEditorRaw };
//# sourceMappingURL=QueryEditorRaw.js.map
