import React from 'react';
import 'prismjs';
import { OperationExplainedBox } from './OperationExplainedBox.js';
import { RawQuery } from './RawQuery.js';
import '@grafana/data';

function OperationListExplained({
  query,
  queryModeller,
  stepNumber,
  language,
  onMouseEnter,
  onMouseLeave
}) {
  return /* @__PURE__ */ React.createElement(React.Fragment, null, query.operations.map((op, index) => {
    var _a;
    const def = queryModeller.getOperationDefinition(op.id);
    if (!def) {
      return `Operation ${op.id} not found`;
    }
    const title = def.renderer(op, def, queryModeller.innerQueryPlaceholder);
    const body = def.explainHandler ? def.explainHandler(op, def) : (_a = def.documentation) != null ? _a : "no docs";
    return /* @__PURE__ */ React.createElement(
      "div",
      {
        key: index,
        onMouseEnter: () => onMouseEnter == null ? undefined : onMouseEnter(op, index),
        onMouseLeave: () => onMouseLeave == null ? undefined : onMouseLeave(op, index)
      },
      /* @__PURE__ */ React.createElement(
        OperationExplainedBox,
        {
          stepNumber: index + stepNumber,
          title: /* @__PURE__ */ React.createElement(RawQuery, { query: title, language }),
          markdown: body
        }
      )
    );
  }));
}

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