import React, { useContext } from 'react';
import { findChildElement, getAttribute, getNumericAttribute, queryAncestors } from '../../dom-utils';
import { useExamTranslation } from '../../i18n';
import { imageCaptionId } from '../../ids';
import { CommonExamContext } from '../context/CommonExamContext';
import ResponsiveMediaContainer from './internal/ResponsiveMediaContainer';
import { isWhitespace } from '../../utils';
function Image(props) {
    const { resolveAttachment } = useContext(CommonExamContext);
    return React.createElement(ImageBase, { ...props, resolveAttachment });
}
export function ImageBase({ element, className, renderChildNodes, resolveAttachment, overrideImage, disableZoomIn }) {
    const src = getAttribute(element, 'src');
    const width = getNumericAttribute(element, 'width');
    const height = getNumericAttribute(element, 'height');
    const title = findChildElement(element, 'image-title');
    const children = title && renderChildNodes(title);
    const hasCaption = children != null && !children.every(isWhitespace);
    const caption = hasCaption ? children : undefined;
    const captionId = hasCaption ? imageCaptionId(element) : undefined;
    const imgUrl = resolveAttachment(src);
    const image = overrideImage || React.createElement("img", { className: "e-image", src: imgUrl, alt: "", "aria-labelledby": captionId });
    const isWithinChoiceAnswer = queryAncestors(element, 'choice-answer') != null;
    const nonZoomableContexts = ['choice-answer', 'hint', 'dnd-answer-option'];
    const isWithinNonZoomableContext = queryAncestors(element, nonZoomableContexts) != null;
    return (React.createElement(React.Fragment, null,
        React.createElement(ResponsiveMediaContainer, { className,
            width,
            height,
            caption,
            captionId,
            bordered: hasCaption || isWithinChoiceAnswer }, disableZoomIn || isWithinNonZoomableContext ? (image) : (React.createElement(ZoomInImage, { image: image, hasCaption: hasCaption, imgUrl: imgUrl })))));
}
function ZoomInImage({ image, imgUrl, hasCaption }) {
    const { t } = useExamTranslation();
    return (React.createElement("a", { title: t.raw('zoom-in'), href: imgUrl, target: "original-picture", className: "e-zoomable", "aria-hidden": !hasCaption, tabIndex: -1 }, image));
}
export default React.memo(Image);
//# sourceMappingURL=Image.js.map