import React from 'react';
import { useExamTranslation } from '../../i18n';
export class UndoHistoryEntry extends React.PureComponent {
    constructor(props) {
        super(props);
        this.inputValueChanged = () => {
            this.props.onChange(this.props.answerIndex);
            if (this.labelInputRef && this.labelInputRef.current) {
                this.labelInputRef.current.scrollIntoView({ block: 'center' });
            }
        };
        this.entryInputRef = React.createRef();
        this.labelInputRef = React.createRef();
    }
    componentDidMount() {
        if (this.entryInputRef.current && this.props.answerIndex === 0) {
            this.entryInputRef.current.focus();
        }
    }
    render() {
        const { selected, croppedAnswer, characterCount, screenshotCount, answerIndex, minutesSinceAnswer } = this.props;
        return (React.createElement("label", { ref: this.labelInputRef, className: "js-undo-history-entry" },
            React.createElement("input", { type: "radio", className: "e-undo-view-entry-tab", name: "undoHistory", value: answerIndex, checked: selected, onChange: this.inputValueChanged, ref: this.entryInputRef }),
            React.createElement(UndoEntry, { croppedAnswer: croppedAnswer, characterCount: characterCount, screenshotCount: screenshotCount, answerIndex: answerIndex, minutesSinceAnswer: minutesSinceAnswer })));
    }
}
const UndoEntry = ({ croppedAnswer, characterCount, screenshotCount, answerIndex, minutesSinceAnswer }) => {
    const { t } = useExamTranslation();
    const characterCountText = characterCount > 0 ? t('undo.answerCharacterCount', { count: characterCount }) : null;
    const imageCountText = screenshotCount > 0 ? t('undo.answerImageCount', { count: screenshotCount }) : null;
    const arr = [characterCountText, imageCountText].filter(x => x !== null);
    return (React.createElement("div", { className: "e-undo-view-entry js-undo-entry-content" },
        React.createElement("div", { className: "js-undo-history-entry-time" }, answerIndex === 0 ? t('undo.latestVersion') : t('undo.minutesSinceAnswer', { minutes: minutesSinceAnswer })),
        React.createElement("div", { className: "e-undo-view-answer-cropped js-undo-history-entry-answer" }, croppedAnswer || t('undo.answerNoText')),
        React.createElement("div", { className: "e-undo-view-answer-length js-undo-history-entry-stats" }, arr.map((el, index) => (React.createElement(React.Fragment, { key: index },
            el,
            index < arr.length - 1 && React.createElement("span", null, ", ")))))));
};
//# sourceMappingURL=UndoHistoryEntry.js.map