import { useDroppable } from '@dnd-kit/core';
import classNames from 'classnames';
import React from 'react';
import { query } from '../../dom-utils';
import { DNDAnswerOptionDraggable } from '../exam/DNDAnswerOptionDraggable';
import { DNDAnswerOption } from '../results/DNDAnswerOption';
import { useExamTranslation } from '../../i18n';
export const DNDDroppable = ({ renderChildNodes, renderComponentOverrides, correctIds, classes = [], questionId, page, answerOptionElements = [] }) => {
    const hasImages = answerOptionElements.some(option => query(option, 'image'));
    const hasAudio = answerOptionElements.some(option => query(option, 'audio'));
    const { active, isOver } = useDroppable({ id: questionId });
    const { t } = useExamTranslation();
    return (React.createElement("div", { className: classNames(['e-dnd-answer-droppable', ...classes], {
            'has-images': hasImages,
            'has-audio': hasAudio,
            hovered: isOver
        }), "data-testid": "dnd-droppable" }, answerOptionElements === null || answerOptionElements === void 0 ? void 0 :
        answerOptionElements.map(element => {
            const optionId = Number(element.getAttribute('option-id'));
            const isCorrect = correctIds === null || correctIds === void 0 ? void 0 : correctIds.includes(optionId);
            return (React.createElement(React.Fragment, { key: element.getAttribute('option-id') }, page === 'exam' ? (React.createElement(DNDAnswerOptionDraggable, { element: element, renderChildNodes: renderChildNodes, renderComponentOverrides: renderComponentOverrides, key: optionId })) : (React.createElement("div", { className: "e-dnd-answer-option" },
                React.createElement(DNDAnswerOption, { element: element, renderChildNodes: renderChildNodes, renderComponentOverrides: renderComponentOverrides, key: optionId, className: !correctIds ? undefined : isCorrect ? 'correct-answer' : 'wrong-answer' })))));
        }),
        !answerOptionElements.length &&
            (active ? (React.createElement("i", { className: "droppable-drop-here" }, t('dnd-answers.drop-here'))) : (React.createElement("i", { className: "droppable-no-answer" }, t('dnd-answers.no-answer'))))));
};
//# sourceMappingURL=DNDDroppable.js.map