import classNames from 'classnames';
import React, { useContext } from 'react';
import { useSelector } from 'react-redux';
import { useIsElementInViewport } from '../../dom-utils';
import { useExamTranslation } from '../../i18n';
import { tocSectionTitleId } from '../../ids';
import AnsweringInstructions from '../AnsweringInstructions';
import { CommonExamContext } from '../context/CommonExamContext';
import { SectionContext } from '../context/SectionContext';
import { IsInSidebarContext } from '../context/IsInSidebarContext';
export const TOCSectionTitle = ({ element, renderChildNodes }) => {
    const { sections } = useContext(CommonExamContext);
    const { childQuestions, displayNumber, minAnswers, maxAnswers } = useContext(SectionContext);
    const { t } = useExamTranslation();
    const { isInSidebar } = useContext(IsInSidebarContext);
    const showAnsweringInstructions = true;
    const showSectionValidationErrors = isInSidebar &&
        !!useSelector((state) => { var _a, _b; return (_b = (_a = state.answers) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.find(i => i.displayNumber === displayNumber && (i === null || i === void 0 ? void 0 : i.elementType) === 'section'); });
    const isVisible = useIsElementInViewport('section', displayNumber);
    return (React.createElement("div", { className: isVisible ? 'current' : '' },
        element.hasChildNodes() && (React.createElement("div", { className: "toc-section-header-container" },
            React.createElement("h3", { className: "toc-section-header", id: tocSectionTitleId(displayNumber) },
                sections.length > 1 && t('section', { displayNumber }),
                " ",
                renderChildNodes(element)))),
        showAnsweringInstructions && maxAnswers && (React.createElement("div", { style: { display: 'grid' }, className: `answer-instructions-container section-${displayNumber}` },
            React.createElement("div", { className: classNames('answer-instructions', {
                    error: showSectionValidationErrors
                }) },
                showSectionValidationErrors && React.createElement("div", { className: "error-mark" }, "!"),
                React.createElement("span", { className: "error-reason" },
                    React.createElement(AnsweringInstructions, { maxAnswers, minAnswers, childQuestions, elementType: 'toc-section' })))))));
};
//# sourceMappingURL=TOCSectionTitle.js.map