import { useDroppable } from '@dnd-kit/core';
import { SortableContext } from '@dnd-kit/sortable';
import classNames from 'classnames';
import React, { useContext } from 'react';
import { getNumericAttribute, query } from '../../dom-utils';
import { useExamTranslation } from '../../i18n';
import { shortDisplayNumber } from '../../shortDisplayNumber';
import { findMultiChoiceFromGradingStructure, ResultsContext } from '../context/ResultsContext';
import ResultsExamQuestionAutoScore from '../results/internal/QuestionAutoScore';
import { DNDDroppable } from './DNDDroppable';
import { Score } from './Score';
export const DNDTitleAndDroppable = ({ element, renderChildNodes, renderComponentOverrides, itemIds, page, answerOptionElements }) => {
    var _a, _b, _c, _d;
    const { t } = useExamTranslation();
    const questionId = element.getAttribute('question-id');
    const questionIdNumber = Number(questionId);
    const displayNumber = element.getAttribute('display-number');
    const maxScore = getNumericAttribute(element, 'max-score');
    const hasImages = !!query(element, 'image');
    const titleElement = query(element, 'dnd-answer-title');
    const hasTitle = titleElement && renderChildNodes(titleElement).length > 0;
    const { gradingStructure, answersByQuestionId } = useContext(ResultsContext);
    const isStudentsExam = !gradingStructure;
    const choice = findMultiChoiceFromGradingStructure(gradingStructure, questionIdNumber);
    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 answer = (_b = answersByQuestionId === null || answersByQuestionId === void 0 ? void 0 : answersByQuestionId[questionIdNumber]) !== null && _b !== void 0 ? _b : undefined;
    const scoreValue = (answer && ((_d = (_c = choice === null || choice === void 0 ? void 0 : choice.options) === null || _c === void 0 ? void 0 : _c.find(option => option.id === Number(answer === null || answer === void 0 ? void 0 : answer.value) && option.correct)) === null || _d === void 0 ? void 0 : _d.score)) || 0;
    const lastLevelOfDisplayNumber = shortDisplayNumber(displayNumber);
    const { setNodeRef, isOver } = useDroppable({ id: questionId });
    return (React.createElement(SortableContext, { id: questionId, items: itemIds },
        React.createElement("span", { ref: setNodeRef },
            React.createElement("div", { className: classNames('e-dnd-answer', {
                    'no-answer': page === 'results' && !(answer === null || answer === void 0 ? void 0 : answer.value)
                }), "data-question-id": questionId, key: questionId },
                React.createElement("div", { className: "anchor", id: `question-nr-${displayNumber}` }),
                titleElement &&
                    (!hasTitle ? (React.createElement("i", { style: { color: 'grey' } }, t('dnd-answers.question-missing'))) : (React.createElement("span", { className: classNames('e-dnd-answer-title', { 'has-images': hasImages, hovered: isOver }) }, renderChildNodes(titleElement)))),
                React.createElement("div", { className: classNames('connection-line', { hovered: isOver }) }),
                React.createElement(DNDDroppable, { page: page, answerOptionElements: answerOptionElements, questionId: questionId, renderChildNodes: renderChildNodes, renderComponentOverrides: renderComponentOverrides, correctIds: correctOptionIds }),
                isStudentsExam ? (maxScore && React.createElement(Score, { score: maxScore, size: "small" })) : (React.createElement(ResultsExamQuestionAutoScore, { score: (answer === null || answer === void 0 ? void 0 : answer.value) ? scoreValue : undefined, maxScore: maxScore, displayNumber: lastLevelOfDisplayNumber, questionId: questionIdNumber }))))));
};
//# sourceMappingURL=DNDTitleAndDroppable.js.map