import React, { useContext } from 'react';
import { createRenderChildNodes } from '../../createRenderChildNodes';
import { queryAncestors } from '../../dom-utils';
import { useExamTranslation } from '../../i18n';
import { externalMaterialListTitleId } from '../../ids';
import { url } from '../../url';
import { AttachmentContext, withAttachmentContext } from '../context/AttachmentContext';
import { CommonExamContext } from '../context/CommonExamContext';
const renderChildNodes = createRenderChildNodes({
    attachment: withAttachmentContext(Attachment),
    'attachment-title': AttachmentTitle
})();
function Attachment({ element }) {
    const { displayNumber } = useContext(AttachmentContext);
    return (React.createElement("li", { "data-list-number": displayNumber, "aria-label": displayNumber }, renderChildNodes(element, 1 /* RenderOptions.SkipHTML */)));
}
function AttachmentTitle({ element }) {
    const { attachmentsURL } = useContext(CommonExamContext);
    const { displayNumber } = useContext(AttachmentContext);
    return (React.createElement("a", { href: url(attachmentsURL, { hash: displayNumber }), className: "exam-attachment-title", target: "attachments" }, renderChildNodes(element)));
}
function ExternalMaterial({ element, showTitle = true, forceRender = false }) {
    if (queryAncestors(element, 'question') == null && !forceRender) {
        return null;
    }
    const { t } = useExamTranslation();
    const id = externalMaterialListTitleId(element);
    return (React.createElement("div", { className: "external-material-list e-mrg-b-4" },
        showTitle && (React.createElement("h3", { className: "external-material-title", id: id }, t('external-material-title'))),
        React.createElement("ol", { className: "e-list-data e-pad-l-0 e-mrg-0", "aria-labelledby": id }, renderChildNodes(element))));
}
export default React.memo(ExternalMaterial);
//# sourceMappingURL=ExternalMaterial.js.map