import { faCompressAlt } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import classNames from 'classnames';
import React, { createContext, useContext, useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import { getNumericAttribute, query } from '../../dom-utils';
import { useExamTranslation } from '../../i18n';
import { ExamContext } from '../context/ExamContext';
import { QuestionContext, withQuestionContext } from '../context/QuestionContext';
import { SectionContext } from '../context/SectionContext';
import { TOCContext } from '../context/TOCContext';
import ModalDialog from '../shared/internal/ModalDialog';
import ErrorIndicator from './internal/ErrorIndicator';
import SaveIndicator from './internal/SaveIndicator';
export const ExpandQuestionContext = createContext({ expanded: false, toggleWriterMode: () => undefined });
function Question({ element, renderChildNodes }) {
    const casStatus = useSelector((state) => state.cas.casStatus);
    const { casForbidden } = useContext(SectionContext);
    const { displayNumber, level } = useContext(QuestionContext);
    const { examServerApi } = useContext(ExamContext);
    const [expanded, setExpanded] = useState(false);
    const { t } = useExamTranslation();
    const toggleWriterMode = (expand) => {
        setExpanded(expand);
        if (examServerApi.logActivity) {
            examServerApi.logActivity(expand
                ? `Writer mode opened for display number ${displayNumber}`
                : `Writer mode closed for display number ${displayNumber}`);
        }
    };
    const textAnswerElement = query(element, 'text-answer');
    const questionId = textAnswerElement ? getNumericAttribute(textAnswerElement, 'question-id') : null;
    useEffect(() => {
        if (expanded) {
            const textInput = questionId
                ? document.querySelector(`[data-question-id="${questionId}"]`)
                : undefined;
            textInput === null || textInput === void 0 ? void 0 : textInput.focus();
        }
    }, [expanded]);
    const ref = React.createRef();
    const { addRef } = useContext(TOCContext);
    useEffect(() => {
        if ((ref === null || ref === void 0 ? void 0 : ref.current) && level === 0 && addRef) {
            addRef(ref.current);
        }
    }, []);
    return !casForbidden || casStatus === 'forbidden' ? (React.createElement(ExpandQuestionContext.Provider, { value: { expanded, toggleWriterMode } },
        React.createElement("div", { className: classNames('e-exam-question', {
                'e-level-0 e-pad-b-8 e-clearfix': level === 0,
                'e-mrg-l-8 e-mrg-y-4': level > 0
            }), "data-annotation-anchor": displayNumber, "data-toc-id": `question-${displayNumber}`, ref: ref },
            React.createElement("div", { className: "anchor", id: `question-nr-${displayNumber}` }),
            expanded ? (React.createElement(ModalDialog, { className: "full-screen", onClose: () => toggleWriterMode(false) },
                React.createElement("button", { className: "expand close", onClick: () => toggleWriterMode(false) },
                    React.createElement(FontAwesomeIcon, { icon: faCompressAlt }),
                    t('close-writing-mode')),
                renderChildNodes(element),
                React.createElement("div", { className: "e-indicators-container" },
                    React.createElement(ErrorIndicator, null),
                    React.createElement(SaveIndicator, null)))) : (renderChildNodes(element))))) : null;
}
export default React.memo(withQuestionContext(Question));
//# sourceMappingURL=Question.js.map