import React, { useContext, useMemo } from 'react';
import { createRenderChildNodes } from '../../createRenderChildNodes';
import { queryAll, queryAncestors } from '../../dom-utils';
import { formatQuestionDisplayNumber } from '../../formatting';
import { useExamTranslation } from '../../i18n';
import { referencesTitleId } from '../../ids';
import { CommonExamContext } from '../context/CommonExamContext';
import Reference from './Reference';
import SectionElement from '../SectionElement';
const _renderChildNodes = createRenderChildNodes({});
function References({ renderComponentOverrides }) {
    const { root } = useContext(CommonExamContext);
    const { t } = useExamTranslation();
    const renderChildNodes = useMemo(() => _renderChildNodes(renderComponentOverrides), [renderComponentOverrides]);
    const internalReferences = queryAll(root, 'reference').filter(reference => queryAncestors(reference, 'external-material') == null);
    return internalReferences.length > 0 ? (React.createElement(SectionElement, { "aria-labelledby": referencesTitleId },
        React.createElement("h2", { id: referencesTitleId }, t('references.heading')),
        React.createElement("div", { className: "anchor", id: "references" }),
        React.createElement("ol", { className: "e-list-data", "data-annotation-anchor": referencesTitleId }, internalReferences.map((reference, i) => {
            const question = queryAncestors(reference, 'question');
            const displayNumber = question.getAttribute('display-number');
            return (React.createElement("li", { "data-list-number": formatQuestionDisplayNumber(displayNumber), key: `${displayNumber}${i}` },
                React.createElement(Reference, { element: reference, renderChildNodes: renderChildNodes, renderComponentOverrides: renderComponentOverrides })));
        })))) : null;
}
export default React.memo(References);
//# sourceMappingURL=References.js.map