import React, { useContext } from 'react';
import { getNumericAttribute } from '../../dom-utils';
import { saveAnswer } from '../../store/answers/actions';
import { useDispatch, useSelector } from 'react-redux';
import { ExamContext } from '../context/ExamContext';
import { AudioRecorder } from './internal/AudioRecorder';
function AudioAnswer(audioAnswerProps) {
    const { element } = audioAnswerProps;
    const questionId = getNumericAttribute(element, 'question-id');
    const answer = useSelector((state) => state.answers.answersById[questionId]);
    const displayNumber = element.getAttribute('display-number');
    const dispatch = useDispatch();
    const { examServerApi } = useContext(ExamContext);
    return (React.createElement("div", { className: "audio-answer", "data-testid": "audio-answer" },
        React.createElement("span", { className: "anchor", id: `question-nr-${displayNumber}` }),
        React.createElement(AudioRecorder, { audioUrl: (answer === null || answer === void 0 ? void 0 : answer.value) === '' ? undefined : answer === null || answer === void 0 ? void 0 : answer.value, onSave: async (audio) => {
                const audioAttachmentUrl = await examServerApi.saveAudio(questionId, audio);
                const answer = { questionId, type: 'audio', value: audioAttachmentUrl };
                dispatch(saveAnswer(answer));
            }, onDelete: async () => {
                if (!answer)
                    return;
                const audioId = answer.value.split('/').pop();
                await examServerApi.deleteAudio(audioId);
                const answerObj = { questionId, type: 'audio', value: '' };
                dispatch(saveAnswer(answerObj));
            }, audioRecorderOptions: {
                audioBitsPerSecond: 65536,
                saveIntervalMs: 5000
            } })));
}
export default React.memo(AudioAnswer);
//# sourceMappingURL=AudioAnswer.js.map