import React, { useContext } from 'react';
import { getAnswerOptionIdsByQuestionId, getAnswerOptionsByOptionId, getCorrectAnswerOptionIdsByQuestionId, query, queryAll } from '../../dom-utils';
import { ResultsContext } from '../context/ResultsContext';
import { CorrectDNDAnswers } from '../results/CorrectDNDAnswers';
import { DNDTitleAndDroppable } from './DNDTitleAndDroppable';
export const DNDAnswerContainer = ({ element, renderChildNodes, renderComponentOverrides, page }) => {
    const { answersByQuestionId, gradingStructure } = useContext(ResultsContext);
    const dndAnswersWithQuestion = queryAll(element, 'dnd-answer').filter(e => !!query(e, 'dnd-answer-title'));
    const answerOptionsByOptionId = getAnswerOptionsByOptionId(element);
    const answerOptionIdsByQuestionId = page === 'results'
        ? getAnswerOptionIdsByQuestionId(element, answersByQuestionId)
        : getCorrectAnswerOptionIdsByQuestionId(element);
    return (React.createElement("div", { className: "e-dnd-answer-container" }, dndAnswersWithQuestion.map(element => {
        var _a;
        const questionId = element.getAttribute('question-id');
        const itemIds = answerOptionIdsByQuestionId[questionId] || [];
        const answerOptionElements = (_a = (answerOptionIdsByQuestionId[questionId] || [])) === null || _a === void 0 ? void 0 : _a.map(id => (answerOptionsByOptionId === null || answerOptionsByOptionId === void 0 ? void 0 : answerOptionsByOptionId[id]) || null).filter(Boolean);
        return (React.createElement(React.Fragment, { key: questionId },
            React.createElement(DNDTitleAndDroppable, { element: element, answerOptionElements: answerOptionElements, renderChildNodes: renderChildNodes, renderComponentOverrides: renderComponentOverrides, itemIds: itemIds, page: page }),
            page === 'results' && gradingStructure && (React.createElement(CorrectDNDAnswers, { element: element, renderChildNodes: renderChildNodes, renderComponentOverrides: renderComponentOverrides, answerOptionsById: answerOptionsByOptionId }))));
    })));
};
//# sourceMappingURL=DNDAnswerContainer.js.map