import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import classNames from 'classnames';
import * as _ from 'lodash-es';
import React, { useContext, useState } from 'react';
import { findChildElement, getNumericAttribute, mapChildElements } from '../../dom-utils';
import { CommonExamContext } from '../context/CommonExamContext';
import ResponsiveMediaContainer from './internal/ResponsiveMediaContainer';
function ImageOverlay({ element, renderChildNodes, renderComponentOverrides }) {
    const [opacities, setOpacities] = useState(() => _.times(element.children.length, i => (i === 0 ? 1 : 0)));
    const mkSetOpacity = (index) => (opacity) => {
        const updatedOpacities = [...opacities];
        updatedOpacities[index] = opacity;
        setOpacities(updatedOpacities);
    };
    return (React.createElement("div", { className: "e-image-overlay e-mrg-b-1" },
        React.createElement("div", { className: "e-columns e-columns--center-h" },
            React.createElement("div", null, mapChildElements(element, (child, index) => (React.createElement(Slider, { key: index, opacity: opacities[index], element: child, setOpacity: mkSetOpacity(index), renderChildNodes: renderChildNodes, renderComponentOverrides: renderComponentOverrides }))))),
        React.createElement("div", null,
            React.createElement("div", { className: "e-image-overlay__images-wrapper" }, mapChildElements(element, (child, index) => (React.createElement(ImageOverlayImage, { key: index, element: child, renderChildNodes: renderChildNodes, renderComponentOverrides: renderComponentOverrides, opacity: opacities[index], absolute: index > 0 })))))));
}
function Slider({ opacity, setOpacity, element, renderChildNodes }) {
    const title = findChildElement(element, 'image-title');
    return (React.createElement("div", { className: "e-columns e-columns--center-v e-mrg-b-1" },
        React.createElement("div", { className: "e-column e-text-right e-mrg-r-1" }, title && renderChildNodes(title)),
        React.createElement(FontAwesomeIcon, { icon: faEyeSlash, className: "e-mrg-r-1 e-pointer", onClick: () => setOpacity(0) }),
        React.createElement("input", { type: "range", min: 0, max: 1, step: 0.01, value: opacity, onChange: e => setOpacity(Number(e.target.value)) }),
        React.createElement(FontAwesomeIcon, { icon: faEye, className: "e-mrg-l-1 e-pointer", onClick: () => setOpacity(1) })));
}
function ImageOverlayImage({ element, absolute, opacity }) {
    const src = element.getAttribute('src');
    const width = getNumericAttribute(element, 'width');
    const height = getNumericAttribute(element, 'height');
    const imgUrl = useContext(CommonExamContext).resolveAttachment(src);
    return (React.createElement("div", { className: classNames('e-columns e-columns--center-h', { 'e-image-overlay__image-absolute': absolute }), style: {
            opacity: opacity
        } },
        React.createElement(ResponsiveMediaContainer, { width,
            height },
            React.createElement("img", { className: "e-image", src: imgUrl }))));
}
export default React.memo(ImageOverlay);
//# sourceMappingURL=ImageOverlay.js.map