import React from 'react';
import classNames from 'classnames';
import { findChildElement, getNumericAttribute, NBSP, queryAncestors } from '../dom-utils';
import { useExamTranslation } from '../i18n';
function AnswerToolbar({ answer, element, screenshotError, validationError, selectAnswerVersion, showAnswerHistory = false, supportsAnswerHistory = false }) {
    const { t } = useExamTranslation();
    const answerLength = answer === null || answer === void 0 ? void 0 : answer.characterCount;
    const maxLength = getNumericAttribute(element, 'max-length');
    return (React.createElement("div", { className: "answer-toolbar e-font-size-xs e-columns e-mrg-b-2" },
        React.createElement("div", { className: classNames('answer-toolbar__answer-length e-column', { 'e-color-error': validationError != null }) },
            answer != null
                ? t(maxLength != null ? 'answer-length-with-max-length' : 'answer-length', {
                    count: answerLength,
                    maxLength: maxLength
                })
                : NBSP,
            screenshotError ? (React.createElement("span", { className: "e-color-error", role: "alert" },
                ' ',
                t(`answer-errors.${screenshotError.key}`, screenshotError.options))) : validationError ? (
            // We don't use an alert role here because ErrorIndicator already displays the same error message wrapped in an alert role
            React.createElement("span", null,
                " ",
                t(`answer-errors.answer-too-long`, { count: validationError.characterCount }))) : null),
        React.createElement("div", { className: "answer-toolbar__history e-column e-column--narrow e-text-right" }, supportsAnswerHistory && (React.createElement("div", { className: "answer-toolbar__select-previous-version" }, showAnswerHistory && answer != null ? (React.createElement("button", { className: "answer-toolbar__previous-versions e-link-button e-font-size-xs", onClick: () => {
                // This is kind of hacky. We need to render the question title in the answer history modal,
                // but the current element we're at is text-answer. So we have to find the containing question
                // and its question-title element (which is specified to be the first child element of the question).
                if (selectAnswerVersion) {
                    const question = queryAncestors(element, 'question');
                    const questionTitle = findChildElement(question, 'question-title');
                    selectAnswerVersion(answer.questionId, questionTitle.textContent);
                }
            } }, t('previous-answer-versions'))) : (NBSP))))));
}
export default React.memo(AnswerToolbar);
//# sourceMappingURL=AnswerToolbar.js.map