import classNames from 'classnames';
import React from 'react';
import { useSelector } from 'react-redux';
import { findChildElement, getNumericAttribute, hasSiblingQuestions, queryAll } from '../../dom-utils';
import { shortDisplayNumber } from '../../shortDisplayNumber';
const Hints = ({ element, renderChildNodes }) => {
    const focusedQuestionId = useSelector((state) => state.answers.focusedQuestionId);
    const answersWithHints = queryAll(element, ['text-answer', 'scored-text-answer']).filter(answer => findChildElement(answer, 'hint') != null);
    return answersWithHints.length > 0 ? (React.createElement("div", { className: "e-columns" },
        React.createElement("div", { className: "e-column e-column--8" }, renderChildNodes(element)),
        React.createElement("div", { className: "e-hints e-column e-column--4", "aria-hidden": "true" }, answersWithHints.map((answer, i) => (React.createElement(Hint, { answer, focusedQuestionId, renderChildNodes, key: i })))))) : (React.createElement(React.Fragment, null, renderChildNodes(element)));
};
function Hint({ answer, focusedQuestionId, renderChildNodes }) {
    const questionId = getNumericAttribute(answer, 'question-id');
    const displayNumber = answer.getAttribute('display-number');
    const hint = findChildElement(answer, 'hint');
    const hasSiblings = hasSiblingQuestions(answer);
    return (React.createElement("p", { className: classNames('e-hints__hint', {
            'e-hints__hint--focused': focusedQuestionId === questionId
        }), onClick: () => {
            const question = document.querySelector(`.text-answer[data-question-id="${questionId}"]`);
            if (question) {
                question.focus();
            }
        }, "data-question-id": questionId },
        hasSiblings && shortDisplayNumber(displayNumber),
        " ",
        renderChildNodes(hint)));
}
export default Hints;
//# sourceMappingURL=Hints.js.map