import React, { useContext } from 'react';
import { useExamTranslation } from '../../i18n';
import { findMultiChoiceFromGradingStructure, ResultsContext } from '../context/ResultsContext';
import { DNDDroppable } from '../shared/DNDDroppable';
export const CorrectDNDAnswers = ({ element, renderChildNodes, renderComponentOverrides, answerOptionsById }) => {
    var _a;
    const questionId = Number(element.getAttribute('question-id'));
    const { t } = useExamTranslation();
    const { gradingStructure } = useContext(ResultsContext);
    const choice = findMultiChoiceFromGradingStructure(gradingStructure, questionId);
    const correctOptionIds = (_a = choice === null || choice === void 0 ? void 0 : choice.options) === null || _a === void 0 ? void 0 : _a.filter(o => o.correct).map(o => o.id);
    const correctDNDAnswerOptions = correctOptionIds === null || correctOptionIds === void 0 ? void 0 : correctOptionIds.map(id => (answerOptionsById === null || answerOptionsById === void 0 ? void 0 : answerOptionsById[id]) || null).filter(Boolean);
    return (React.createElement(React.Fragment, null,
        React.createElement("span", { className: "droppable-title align-right" }, t('dnd-answers.correct-answers')),
        React.createElement(DNDDroppable, { renderChildNodes: renderChildNodes, renderComponentOverrides: renderComponentOverrides, answerOptionElements: correctDNDAnswerOptions, correctIds: correctOptionIds, questionId: questionId, page: "results", classes: ['correct-answers'] })));
};
//# sourceMappingURL=CorrectDNDAnswers.js.map