import classNames from 'classnames';
import React, { useContext } from 'react';
import { getNumericAttribute, mapChildElements, query } from '../../dom-utils';
import { useExamTranslation } from '../../i18n';
import { ScreenReaderOnly } from '../ScreenReaderOnly';
import { findMultiChoiceFromGradingStructure, ResultsContext } from '../context/ResultsContext';
import ResultsExamQuestionAutoScore from './internal/QuestionAutoScore';
function ChoiceAnswerOption({ renderChildNodes, selected, element, questionId, direction, isCorrect }) {
    const { t } = useExamTranslation();
    const className = element.getAttribute('class');
    const optionId = element.getAttribute('option-id');
    const content = (React.createElement("div", { className: classNames('e-choice-answer-option e-column', className, {
            'e-choice-answer-option--selected': selected
        }) }, renderChildNodes(element)));
    const Content = ({ narrow = false }) => (React.createElement(React.Fragment, null,
        React.createElement("input", { type: "radio", className: classNames('e-radio-button', { 'e-column e-column--narrow': narrow }), name: String(questionId), value: optionId, checked: selected, readOnly: true }),
        content,
        isCorrect && React.createElement(ScreenReaderOnly, null, t('screen-reader.correct-answer'))));
    return direction === 'vertical' ? (React.createElement("div", { className: "e-mrg-b-1" },
        React.createElement("label", { className: classNames('e-columns', {
                'e-correct-answer-left': isCorrect,
                'e-columns--inline': query(element, ['image', 'video']) == null /* Force full width for options containing responsive media */
            }) },
            React.createElement(Content, { narrow: true })))) : (React.createElement("div", { className: "e-column e-mrg-b-1" },
        React.createElement("label", { className: classNames('e-block e-text-center', { 'e-correct-answer-bottom': isCorrect }) },
            React.createElement(Content, null))));
}
function ChoiceAnswer({ element, renderChildNodes, renderComponentOverrides }) {
    var _a, _b;
    const { answersByQuestionId, gradingStructure } = useContext(ResultsContext);
    const questionId = getNumericAttribute(element, 'question-id');
    const answer = answersByQuestionId[questionId];
    const direction = element.getAttribute('direction') || 'vertical';
    const className = element.getAttribute('class');
    const choice = findMultiChoiceFromGradingStructure(gradingStructure, questionId);
    const scoreValue = answer && ((_b = (_a = choice === null || choice === void 0 ? void 0 : choice.options) === null || _a === void 0 ? void 0 : _a.find(option => option.id === Number(answer.value))) === null || _b === void 0 ? void 0 : _b.score);
    const maxScore = getNumericAttribute(element, 'max-score');
    return (React.createElement(React.Fragment, null,
        React.createElement(ResultsExamQuestionAutoScore, { score: scoreValue, maxScore: maxScore, questionId: questionId }),
        React.createElement("div", { className: classNames('e-choice-answer', className, {
                'e-columns': direction === 'horizontal'
            }) }, mapChildElements(element, childElement => {
            var _a;
            const optionId = getNumericAttribute(childElement, 'option-id');
            const selected = answer != null && Number(answer.value) === optionId;
            const grading = (_a = choice === null || choice === void 0 ? void 0 : choice.options) === null || _a === void 0 ? void 0 : _a.find(option => option.id === optionId);
            return (React.createElement(ChoiceAnswerOption, { element: childElement,
                renderChildNodes,
                renderComponentOverrides,
                questionId,
                key: optionId,
                direction,
                selected,
                isCorrect: (grading === null || grading === void 0 ? void 0 : grading.correct) || false }));
        }))));
}
export default React.memo(ChoiceAnswer);
//# sourceMappingURL=ChoiceAnswer.js.map