import React, { useContext } from 'react';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { useExamTranslation } from '../../i18n';
import { sectionTitleId } from '../../ids';
import { allowCas, allowCasCancelled } from '../../store/cas/actions';
import { ExamContext } from '../context/ExamContext';
import ProgressBar from './internal/ProgressBar';
import SectionElement from '../SectionElement';
import { SectionContext, withSectionContext } from '../context/SectionContext';
import { CommonExamContext } from '../context/CommonExamContext';
import * as _ from 'lodash-es';
import GoToExamineAnswersButton from './GoToExamineAnswersButton';
function LastSectionNote() {
    const { t } = useExamTranslation();
    return (React.createElement("p", null,
        React.createElement("em", null, t('end-of-exam'))));
}
function Section({ element, renderChildNodes }) {
    const casState = useSelector((state) => state.cas, shallowEqual);
    const { casForbidden, displayNumber } = useContext(SectionContext);
    const { sections } = useContext(CommonExamContext);
    const lastSection = element === _.last(sections);
    return (React.createElement(SectionElement, { className: "exam-section", "aria-labelledby": sectionTitleId(displayNumber) },
        renderChildNodes(element),
        casForbidden && React.createElement(CasControls, { ...casState }),
        lastSection && React.createElement(LastSectionNote, null)));
}
function CasControls(props) {
    const dispatch = useDispatch();
    const { t } = useExamTranslation();
    const { casCountdownDuration } = useContext(ExamContext);
    return (React.createElement("div", { className: "e-cas-controls" }, props.casStatus === 'forbidden' ? (React.createElement("div", { className: "e-text-center" },
        React.createElement("hr", { className: "e-exam-separator" }),
        React.createElement("p", null,
            t('cas.examineSectionA'),
            React.createElement("br", null),
            t('cas.cannotEditLater')),
        React.createElement(GoToExamineAnswersButton, null),
        React.createElement("p", null, t('cas.youCanReturn')),
        React.createElement("p", { className: "dots-separator" }, "\u2022\u2022\u2022"),
        React.createElement("p", { id: "e-cas-controls-forbidden-description" }, t('cas.forbidden.infoText')),
        React.createElement("button", { className: "e-button", id: "allow-cas", onClick: () => dispatch(allowCas(casCountdownDuration)), "aria-describedby": "e-cas-controls-forbidden-description" }, t('cas.forbidden.buttonText')))) : props.casStatus === 'allowing' ? (React.createElement("div", { className: "e-text-center", ref: e => e != null && casCountdownDuration === props.durationRemaining && e.scrollIntoView() },
        React.createElement("hr", { className: "e-exam-separator" }),
        React.createElement("p", { id: "e-cas-controls-allowing-description" }, t('cas.allowing.infoText')),
        React.createElement(ProgressBar, { className: "e-mrg-b-2", duration: casCountdownDuration, durationRemaining: props.durationRemaining }),
        React.createElement("button", { className: "e-button", id: "allow-cas-cancelled", onClick: () => dispatch(allowCasCancelled()), ref: e => e != null && casCountdownDuration === props.durationRemaining && e.focus(), "aria-describedby": "e-cas-controls-allowing-description" }, t('cas.allowing.cancel', { count: props.durationRemaining })))) : (React.createElement("div", { className: "notification e-text-left e-mrg-b-0" }, t('cas.allowed.infoText')))));
}
export default React.memo(withSectionContext(Section));
//# sourceMappingURL=Section.js.map