import * as _ from 'lodash-es';
import React from 'react';
import { CommonExamContext } from '../context/CommonExamContext';
import RichTextEditor from 'rich-text-editor';
import { ExpandQuestionContext } from './Question';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faExpandAlt } from '@fortawesome/free-solid-svg-icons';
import { useExamTranslation } from '../../i18n';
class RichTextAnswer extends React.PureComponent {
    constructor(props) {
        super(props);
        this.handleSaveError = (err) => {
            const key = (() => {
                switch (_.get(err, 'response.status')) {
                    case 409:
                        return 'screenshot-byte-limit-reached';
                    case 413:
                        return 'screenshot-too-big';
                    default:
                        return 'screenshot-upload-failed';
                }
            })();
            this.props.onError({ key });
        };
        this.handleChange = (answer) => {
            const { onChange } = this.props;
            this.lastHTML = answer.answerHtml;
            onChange(answer.answerHtml, answer.answerText);
        };
        this.editorRef = React.createRef();
        this.lastHTML = this.props.answer ? this.props.answer.value : '';
    }
    componentDidUpdate() {
        /**
         * Don't update element unless value has changed from last known value to prevent cursor jumping
         * This implementation is _primarily_ intended to be used by AnswerToolbar's answerHistory, which
         * will update the value of `answer` without the user making edits to the rich-text-editor input field
         * */
        if (this.editorRef.current && this.props.answer && this.props.answer.value !== this.lastHTML) {
            this.lastHTML = this.props.answer.value;
            this.editorRef.current.setValue(this.props.answer.value);
        }
    }
    render() {
        const { questionId, className, labelledBy, answer, lang, invalid, saveScreenshot } = this.props;
        return (React.createElement(ExpandQuestionContext.Consumer, null, ({ expanded, toggleWriterMode }) => (React.createElement(React.Fragment, null,
            React.createElement(RichTextEditor, { ref: this.editorRef, baseUrl: '', initialValue: answer === null || answer === void 0 ? void 0 : answer.value, language: this.context.language.slice(0, 2).toUpperCase(), onValueChange: this.handleChange, getPasteSource: (file) => saveScreenshot(file).catch((err) => {
                    this.handleSaveError(err);
                    throw err; // Rethrow error so rich-text-editor can handle it.
                }), textAreaProps: {
                    ariaInvalid: invalid,
                    ariaLabelledBy: labelledBy,
                    id: questionId.toString(),
                    questionId,
                    className,
                    lang
                } }),
            !expanded && (React.createElement("button", { className: "expand open", onClick: () => toggleWriterMode(true), "aria-labelledby": "expand-label", "aria-owns": String(questionId) },
                React.createElement(ExpandButtonLabel, null),
                React.createElement(FontAwesomeIcon, { icon: faExpandAlt })))))));
    }
}
RichTextAnswer.contextType = CommonExamContext;
export default RichTextAnswer;
const ExpandButtonLabel = () => {
    const { t } = useExamTranslation();
    return (React.createElement("div", { className: "label", id: "expand-label" }, t('open-writing-mode')));
};
//# sourceMappingURL=RichTextAnswer.js.map