import { faPlay } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React, { useContext, useRef } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { getNumericAttribute, NBSP } from '../../dom-utils';
import { useExamTranslation } from '../../i18n';
import { playAudio } from '../../store/audio/actions';
import { getAudioPlaybackError, getAudioState } from '../../store/selectors';
import AudioError from './internal/RenderIfNoError';
import { CommonExamContext } from '../context/CommonExamContext';
function AudioTest({ element }) {
    const src = element.getAttribute('src');
    const duration = getNumericAttribute(element, 'duration');
    const { t } = useExamTranslation();
    const audioState = useSelector(getAudioState(src));
    const audioPlaybackError = useSelector(getAudioPlaybackError(src));
    const dispatch = useDispatch();
    const { abitti2, resolveAttachment } = useContext(CommonExamContext);
    const audioRef = useRef(null);
    return (React.createElement("div", { className: "e-audio-test notification e-pad-2 e-mrg-b-4" },
        React.createElement("p", null, t('audio-test.instructions')),
        React.createElement("div", { className: "e-columns e-columns--center-v e-mrg-b-2" },
            React.createElement("div", { className: "e-column e-column--narrow" },
                abitti2 && (React.createElement("audio", { ref: audioRef, preload: "none" },
                    React.createElement("source", { src: resolveAttachment(src) }))),
                React.createElement("button", { className: "e-button", disabled: audioState !== 'stopped', onClick: () => audioState === 'stopped' && dispatch(playAudio({ src, duration, audioRef })) },
                    React.createElement(FontAwesomeIcon, { className: "e-mrg-r-1", icon: faPlay, fixedWidth: true }),
                    t('audio-test.play'))),
            React.createElement("div", { className: "e-column" },
                React.createElement(AudioError, { error: audioPlaybackError }, NBSP))),
        React.createElement("div", null, t('audio-test.volume'))));
}
export default React.memo(AudioTest);
//# sourceMappingURL=AudioTest.js.map