import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React, { useContext } from 'react';
import { useSelector } from 'react-redux';
import { findChildElement } from '../../../dom-utils';
import { useExamTranslation } from '../../../i18n';
import AnsweringInstructions from '../../AnsweringInstructions';
import { CommonExamContext } from '../../context/CommonExamContext';
import classNames from 'classnames';
const ExtraAnswerError = props => {
    const { t } = useExamTranslation();
    const { displayNumber, elementType } = props;
    return (React.createElement("div", null,
        elementType !== 'exam' && elementType !== 'toc-section'
            ? t(elementType, { displayNumber }) || React.createElement(FallbackTitle, { ...props })
            : '',
        ' ',
        React.createElement(AnsweringInstructions, { ...props })));
};
const AnswerTooLongError = ({ displayNumber, characterCount }) => {
    const { t } = useExamTranslation();
    return (React.createElement("div", null,
        t('question', { displayNumber }),
        " ",
        t('answer-errors.answer-too-long', { count: characterCount })));
};
export function ErrorIndicatorForErrors({ validationErrors, inExam }) {
    return validationErrors.length > 0 ? (React.createElement("dialog", { open: true, className: classNames({
            'error-indicator-active e-bg-color-error e-color-off-white': inExam,
            'error-indicator-inactive': !inExam
        }, 'error-indicator e-font-size-xs e-columns e-columns--inline  e-pad-1 e-mrg-r-1'), role: "alert" },
        React.createElement("div", { className: "e-column e-color-off-white e-column--narrow" },
            React.createElement(FontAwesomeIcon, { size: "lg", icon: faExclamationTriangle, fixedWidth: true, className: "e-mrg-r-1" })),
        React.createElement("div", { className: "e-column e-column--gapless" }, validationErrors.map(validationError => {
            const key = validationError.type + validationError.displayNumber;
            switch (validationError.type) {
                case 'ExtraAnswer':
                    return React.createElement(ExtraAnswerError, { ...validationError, key });
                default:
                    return React.createElement(AnswerTooLongError, { ...validationError, key });
            }
        })))) : null;
}
const ErrorIndicator = () => {
    const validationErrors = useSelector((state) => state.answers.validationErrors);
    return React.createElement(ErrorIndicatorForErrors, { validationErrors: validationErrors, inExam: true });
};
const FallbackTitle = ({ elementType, displayNumber }) => {
    // Hack. M/N exams have set the section translation title to an empty string,
    // so they can hide the "Osa 1:" text within the exam. In these cases, display
    // the text content of the corresponding <e:section-title> instead. Hopefully
    // we can delete this code on some day. 💩
    if (elementType === 'section') {
        const { root } = useContext(CommonExamContext);
        const section = findChildElement(root, e => e.localName === 'section' && e.getAttribute('display-number') === displayNumber);
        if (section) {
            const sectionTitle = findChildElement(section, 'section-title');
            if (sectionTitle) {
                return React.createElement(React.Fragment, null, `${sectionTitle.textContent.trim()}:`);
            }
        }
    }
    return null;
};
export default React.memo(ErrorIndicator);
//# sourceMappingURL=ErrorIndicator.js.map