import React from 'react';
import { useAsync } from 'react-use';
import '../types.js';
import { QueryToolbox } from '../query-editor-raw/QueryToolbox.js';
import { Preview } from './Preview.js';
import { SQLGroupByRow } from './SQLGroupByRow.js';
import { SQLOrderByRow } from './SQLOrderByRow.js';
import { SQLSelectRow } from './SQLSelectRow.js';
import { SQLWhereRow } from './SQLWhereRow.js';
import '@grafana/data';
import { EditorRow } from './EditorRow.js';
import { EditorField } from './EditorField.js';
import { EditorRows } from './EditorRows.js';

const VisualEditor = ({
  query,
  db,
  queryRowFilter,
  onChange,
  onValidate,
  language = "sql",
  range
}) => {
  const state = useAsync(async () => {
    const fields = await db.fields(query);
    return fields;
  }, [db, query.dataset, query.table]);
  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(EditorRows, null, /* @__PURE__ */ React.createElement(EditorRow, null, /* @__PURE__ */ React.createElement(SQLSelectRow, { fields: state.value || [], query, onQueryChange: onChange, db })), queryRowFilter.filter && /* @__PURE__ */ React.createElement(EditorRow, null, /* @__PURE__ */ React.createElement(EditorField, { label: "Filter by column value", optional: true }, /* @__PURE__ */ React.createElement(SQLWhereRow, { fields: state.value || [], query, onQueryChange: onChange, db }))), queryRowFilter.group && /* @__PURE__ */ React.createElement(EditorRow, null, /* @__PURE__ */ React.createElement(EditorField, { label: "Group by column" }, /* @__PURE__ */ React.createElement(SQLGroupByRow, { fields: state.value || [], query, onQueryChange: onChange, db }))), queryRowFilter.order && /* @__PURE__ */ React.createElement(EditorRow, null, /* @__PURE__ */ React.createElement(SQLOrderByRow, { fields: state.value || [], query, onQueryChange: onChange, db })), queryRowFilter.preview && query.rawSql && /* @__PURE__ */ React.createElement(EditorRow, null, /* @__PURE__ */ React.createElement(Preview, { rawSql: query.rawSql, language }))), /* @__PURE__ */ React.createElement(QueryToolbox, { db, query, onValidate, range }));
};

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