import classNames from 'classnames';
import React, { useCallback, useContext } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { getNumericAttribute, mapChildElements, query } from '../../dom-utils';
import { QuestionContext } from '../context/QuestionContext';
import { saveAnswer } from '../../store/answers/actions';
const ChoiceAnswerOption = ({ selected, element, renderChildNodes, questionId, onSelect, direction, value }) => {
    const className = element.getAttribute('class');
    const content = (React.createElement("div", { className: classNames('e-choice-answer-option e-column e-pointer', className, {
            'e-choice-answer-option--selected': selected
        }) }, renderChildNodes(element)));
    return direction === 'vertical' ? (React.createElement("div", { className: "e-mrg-b-1" },
        React.createElement("label", { className: classNames('e-columns', {
                'e-columns--inline': query(element, ['image', 'video']) == null /* Force full width for options containing responsive media */
            }) },
            React.createElement("input", { type: "radio", className: "e-radio-button e-column e-column--narrow", name: String(questionId), onChange: onSelect, value: value, checked: selected }),
            content))) : (React.createElement("div", { className: "e-column e-mrg-b-1" },
        React.createElement("label", { className: "e-block e-text-center" },
            React.createElement("input", { type: "radio", className: "e-radio-button", name: String(questionId), onChange: onSelect, value: value, checked: selected }),
            content)));
};
const ChoiceAnswer = ({ element, renderChildNodes, renderComponentOverrides }) => {
    const questionId = getNumericAttribute(element, 'question-id');
    const displayNumber = element.getAttribute('display-number');
    const direction = element.getAttribute('direction') || 'vertical';
    const className = element.getAttribute('class');
    const { questionLabelIds } = useContext(QuestionContext);
    const answer = useSelector((state) => state.answers.answersById[questionId]);
    const dispatch = useDispatch();
    const onSelect = useCallback(event => {
        dispatch(saveAnswer({ type: 'choice', questionId, value: event.currentTarget.value, displayNumber }));
    }, [questionId, displayNumber]);
    return (React.createElement("div", { className: classNames('e-choice-answer e-mrg-b-4', className, {
            'e-columns': direction === 'horizontal'
        }), "data-question-id": questionId, role: "radiogroup", "aria-labelledby": questionLabelIds },
        React.createElement("span", { className: "anchor", id: `question-nr-${displayNumber}` }),
        mapChildElements(element, childElement => {
            const optionId = childElement.getAttribute('option-id');
            const isNoAnswer = childElement.getAttribute('type') === 'no-answer';
            const value = isNoAnswer ? '' : optionId;
            const selected = answer != null && answer.value === value;
            return (React.createElement(ChoiceAnswerOption, { element: childElement,
                onSelect,
                renderChildNodes,
                renderComponentOverrides,
                questionId,
                key: optionId,
                direction,
                selected,
                value }));
        })));
};
export default React.memo(ChoiceAnswer);
//# sourceMappingURL=ChoiceAnswer.js.map