import classNames from 'classnames';
import React, { useContext, useEffect } from 'react';
import { useSelector } from 'react-redux';
import { createRenderChildNodes } from '../../createRenderChildNodes';
import { getNumericAttribute } from '../../dom-utils';
import { useExamTranslation } from '../../i18n';
import { tocTitleId } from '../../ids';
import { CommonExamContext } from '../context/CommonExamContext';
import { withQuestionContext } from '../context/QuestionContext';
import { withSectionContext } from '../context/SectionContext';
import { TOCQuestion } from './TOCQuestion';
import { TOCSection } from './TOCSection';
import { IsInSidebarContext } from '../context/IsInSidebarContext';
const renderChildNodes = createRenderChildNodes({
    section: withSectionContext(TOCSection),
    question: withQuestionContext(TOCQuestion)
})();
export const mkTableOfContents = (options) => {
    const { showAnsweringInstructions, isInSidebar } = options;
    const TableOfContents = () => {
        const { root, maxScore } = useContext(CommonExamContext);
        const { t } = useExamTranslation();
        const maxAnswers = getNumericAttribute(root, 'max-answers');
        const showExamValidationErrors = isInSidebar &&
            !!useSelector((state) => { var _a; return (_a = state.answers.validationErrors) === null || _a === void 0 ? void 0 : _a.find(i => (i === null || i === void 0 ? void 0 : i.elementType) === 'exam'); });
        const ref = React.createRef();
        useEffect(() => {
            var _a;
            // Prevent scrolling the whole page when scrolling the TOC
            const handleTOCScroll = (e) => {
                const toc = e.currentTarget;
                if (toc.scrollHeight <= toc.clientHeight) {
                    return;
                }
                const deltaY = e.deltaY;
                const hitsTop = deltaY < 0 && toc.scrollTop === 0;
                const hitsBottom = deltaY > 0 && toc.scrollTop >= toc.scrollHeight - toc.clientHeight;
                if (hitsTop || hitsBottom) {
                    e.preventDefault();
                }
            };
            (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener('wheel', handleTOCScroll, { passive: false });
            return () => { var _a; return (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('wheel', handleTOCScroll); };
        }, []);
        return (React.createElement("nav", { className: "table-of-contents", "aria-labelledby": tocTitleId, ref: ref },
            !isInSidebar && (React.createElement("h2", { id: tocTitleId },
                React.createElement("span", { className: "e-toc-heading" }, t('toc-heading')))),
            showAnsweringInstructions && maxAnswers && (React.createElement("div", { style: { display: 'grid' } },
                React.createElement("div", { className: classNames('answer-instructions', { error: showExamValidationErrors }) },
                    showExamValidationErrors && React.createElement("div", { className: "error-mark exam" }, "!"),
                    React.createElement("span", { className: "error-reason" }, t('max-answers-warning', { count: maxAnswers }))))),
            React.createElement(IsInSidebarContext.Provider, { value: { isInSidebar } },
                React.createElement("ol", { className: "e-list-plain e-pad-l-0" }, renderChildNodes(root))),
            React.createElement("div", { className: "e-columns" },
                React.createElement("strong", { className: "e-column e-total" }, t('exam-total')),
                React.createElement("strong", { className: "e-column e-column--narrow table-of-contents--score-column" }, t('points', { count: maxScore })),
                isInSidebar && React.createElement("span", { className: "e-column e-column--narrow e-external-material" }))));
    };
    return React.memo(TableOfContents);
};
//# sourceMappingURL=TableOfContents.js.map