import classNames from 'classnames';
import React, { useContext } from 'react';
import { findChildElement, getNumericAttribute } from '../../dom-utils';
import { useExamTranslation } from '../../i18n';
import { shortDisplayNumber } from '../../shortDisplayNumber';
import { QuestionContext } from '../context/QuestionContext';
import { ScreenReaderOnly } from '../ScreenReaderOnly';
import { findMultiChoiceFromGradingStructure, ResultsContext } from '../context/ResultsContext';
import ResultsExamQuestionAutoScore from './internal/QuestionAutoScore';
import { useIsStudentsExamineExamPage } from './isExamineExamPageHook';
function DropdownAnswer({ element, renderChildNodes }) {
    var _a;
    const { t, i18n } = useExamTranslation();
    const { answersByQuestionId, gradingStructure } = useContext(ResultsContext);
    const { answers } = useContext(QuestionContext);
    const questionId = getNumericAttribute(element, 'question-id');
    const answer = answersByQuestionId[questionId];
    const selectedOption = findChildElement(element, childElement => (answer === null || answer === void 0 ? void 0 : answer.value) === childElement.getAttribute('option-id'));
    const isStudentsExamineExamPage = useIsStudentsExamineExamPage();
    const choice = findMultiChoiceFromGradingStructure(gradingStructure, questionId);
    const correctIds = (choice === null || choice === void 0 ? void 0 : choice.options.filter(o => o.correct).map(o => o.id)) || [];
    const correctOptions = Array.from(element.children).filter(childElement => correctIds.includes(getNumericAttribute(childElement, 'option-id')));
    const isAnswerCorrect = selectedOption && correctIds.includes(getNumericAttribute(selectedOption, 'option-id'));
    const displayNumber = shortDisplayNumber(element.getAttribute('display-number'));
    const scoreValue = (answer && ((_a = choice === null || choice === void 0 ? void 0 : choice.options.find(option => option.id === Number(answer.value))) === null || _a === void 0 ? void 0 : _a.score)) || 0;
    const maxScore = getNumericAttribute(element, 'max-score');
    return (React.createElement(React.Fragment, null,
        answers.length > 1 && React.createElement("sup", null, displayNumber),
        React.createElement("span", { className: classNames('e-dropdown-answer__answered', !selectedOption && 'e-dropdown-answer__no-answer', !isStudentsExamineExamPage && {
                'e-dropdown-answer__answered--correct': isAnswerCorrect,
                'e-dropdown-answer__answered--wrong': !isAnswerCorrect
            }), "data-question-id": questionId, "aria-description": !selectedOption ? i18n.t('examineExam.questionHasNoAnswer') : undefined },
            React.createElement(ScreenReaderOnly, null, t('screen-reader.answer-begin')),
            selectedOption && renderChildNodes(selectedOption),
            React.createElement(ScreenReaderOnly, null, t('screen-reader.answer-end')),
            isAnswerCorrect && React.createElement(ScreenReaderOnly, null, t('screen-reader.correct-answer'))),
        !isStudentsExamineExamPage && !isAnswerCorrect && (React.createElement("span", { className: "e-dropdown-answer__correct", "aria-hidden": true }, correctOptions.map((correctOption, i) => (React.createElement(React.Fragment, { key: i },
            renderChildNodes(correctOption),
            i < correctOptions.length - 1 && ', '))))),
        scoreValue != null && (React.createElement(ResultsExamQuestionAutoScore, { score: scoreValue, maxScore: maxScore, displayNumber: displayNumber, questionId: questionId }))));
}
export default React.memo(DropdownAnswer);
//# sourceMappingURL=DropdownAnswer.js.map