import classNames from 'classnames';
import React, { useContext } from 'react';
import { useSelector } from 'react-redux';
import { getNumericAttribute } from '../../dom-utils';
import { useExamTranslation } from '../../i18n';
import { audioLabelId } from '../../ids';
import { getAudioPlaybackError, getPlaybackTimesRemaining } from '../../store/selectors';
import RenderIfNoError from './internal/RenderIfNoError';
import { CommonExamContext } from '../context/CommonExamContext';
import RestrictedAudioPlayer from './internal/RestrictedAudioPlayer';
import AudioPlayer from './internal/AudioPlayer';
function Audio({ element, className, renderChildNodes }) {
    const src = element.getAttribute('src');
    const restrictedAudioId = getNumericAttribute(element, 'restricted-audio-id');
    const times = getNumericAttribute(element, 'times');
    const duration = getNumericAttribute(element, 'duration');
    const { t } = useExamTranslation();
    const audioPlaybackError = times != null && restrictedAudioId != null ? useSelector(getAudioPlaybackError(src, restrictedAudioId)) : undefined;
    const playbackTimesRemaining = times != null && restrictedAudioId != null
        ? useSelector(getPlaybackTimesRemaining(restrictedAudioId, times))
        : undefined;
    const { resolveAttachment } = useContext(CommonExamContext);
    const labelId = audioLabelId(element);
    return (React.createElement("div", { className: classNames('audio e-columns e-columns--center-v e-pad-b-2 e-cursor-default', className), onClick: e => e.preventDefault() },
        restrictedAudioId != null && times != null ? (React.createElement(RestrictedAudioPlayer, { src, restrictedAudioId, duration, times, labelId })) : (React.createElement(AudioPlayer, { src: resolveAttachment(src), labelId: labelId })),
        (playbackTimesRemaining != null || audioPlaybackError != null || element.hasChildNodes()) && (React.createElement("div", { className: "e-column", id: labelId },
            React.createElement(RenderIfNoError, { error: audioPlaybackError }, renderChildNodes(element)),
            playbackTimesRemaining != null && React.createElement("em", null, t('listen-times-remaining', { count: playbackTimesRemaining }))))));
}
export default React.memo(Audio);
//# sourceMappingURL=Audio.js.map