import React, { useContext } from 'react';
import { findChildElement, parentElements } from '../../dom-utils';
import { QuestionContext, withQuestionContext } from '../context/QuestionContext';
import SectionElement from '../SectionElement';
import { questionTitleId } from '../../ids';
function Question({ element, renderChildNodes }) {
    const { displayNumber, hasExternalMaterial, level } = useContext(QuestionContext);
    return isTopmostQuestionContainingExternalMaterial(element, hasExternalMaterial, level) ? (React.createElement(SectionElement, { id: displayNumber, "aria-labelledby": questionTitleId(displayNumber) }, renderChildNodes(element, 1 /* RenderOptions.SkipHTML */))) : (React.createElement(React.Fragment, null, renderChildNodes(element, 1 /* RenderOptions.SkipHTML */)));
}
function isTopmostQuestionContainingExternalMaterial(element, hasExternalMaterial, level) {
    return (hasExternalMaterial &&
        (level === 0 ||
            parentElements(element).every(parent => parent.localName === 'question' ? !findChildElement(parent, 'external-material') : true)));
}
export default React.memo(withQuestionContext(Question));
//# sourceMappingURL=Question.js.map