import React, { useContext, useEffect } from 'react';
import { useExamTranslation } from '../../i18n';
import { sectionTitleId } from '../../ids';
import AnsweringInstructions from '../AnsweringInstructions';
import { CommonExamContext } from '../context/CommonExamContext';
import NotificationIcon from '../NotificationIcon';
import { SectionContext } from '../context/SectionContext';
import { TOCContext } from '../context/TOCContext';
function SectionTitle({ element, renderChildNodes }) {
    const { sections } = useContext(CommonExamContext);
    const { displayNumber, minAnswers, maxAnswers, childQuestions } = useContext(SectionContext);
    const { t } = useExamTranslation();
    const ref = React.createRef();
    const { addRef } = useContext(TOCContext);
    useEffect(() => {
        if ((ref === null || ref === void 0 ? void 0 : ref.current) && addRef) {
            addRef(ref.current);
        }
    }, []);
    return (React.createElement(React.Fragment, null,
        element.hasChildNodes() && (React.createElement("h2", { className: "exam-section-title", id: sectionTitleId(displayNumber), "data-toc-id": `section-${displayNumber}`, ref: ref, "data-annotation-anchor": `section-title-${displayNumber}` },
            sections.length > 1 && t('section', { displayNumber }),
            " ",
            renderChildNodes(element))),
        maxAnswers != null && (React.createElement("span", { className: "notification notification--inline" },
            React.createElement(NotificationIcon, null),
            React.createElement(AnsweringInstructions, { maxAnswers, minAnswers, childQuestions, elementType: 'section' })))));
}
export default React.memo(SectionTitle);
//# sourceMappingURL=SectionTitle.js.map