import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useRef } from 'react';
import { useConsolidatedRef, useTestIds, useUID } from '../../hooks';
import { getActiveElement, withTestIds } from '../../utils';
import SelectionCard, { focusableSelector } from '../SelectionCard/SelectionCard';
import Text from '../Text';
import RadioButton from './RadioButton';
import { getRadioButtonCardTestIds } from './RadioButton.test-ids';
const RadioButtonCard = forwardRef(function RadioButtonCard(prop, ref) {
    const uid = useUID();
    const { testId, id = uid, label, headingTag = 'h4', 'aria-label': ariaLabel, disabled, readOnly, onChange, onClick, onKeyDown, status, checked, value, ...restProps } = prop;
    const cardId = `${id}-card`;
    const labelId = `${id}-label`;
    const testIds = useTestIds(testId, getRadioButtonCardTestIds);
    const inputRef = useConsolidatedRef(ref);
    const containerRef = useRef(null);
    return (_jsx(SelectionCard, { ...restProps, id: cardId, testId: testIds, "aria-labelledby": ariaLabel ? undefined : labelId, "aria-label": ariaLabel, heading: _jsx(RadioButton, { testId: testIds.root, onChange: onChange, onClick: onClick, status: status, checked: checked, value: value, id: id, disabled: disabled, readOnly: readOnly, "aria-labelledby": labelId, label: _jsx(Text, { variant: headingTag, as: 'span', id: labelId, "data-testid": testIds.label, children: label }), variant: 'simple', ref: inputRef, onKeyDown: (e) => {
                if (e.key.includes('arrow'))
                    e.preventDefault();
                onKeyDown?.(e);
            } }), readOnly: readOnly, disabled: disabled, onClick: (e) => {
            const target = e.target;
            if (readOnly || !containerRef.current?.contains(target))
                return;
            if (containerRef.current &&
                [...containerRef.current.querySelectorAll(focusableSelector)].includes(target))
                return;
            e.preventDefault();
            inputRef.current?.click();
            (inputRef.current?.hasAttribute('data-main-focus')
                ? inputRef
                : containerRef).current?.focus();
        }, onKeyDown: (e) => {
            if (e.key === ' ' && containerRef.current === getActiveElement()) {
                e.preventDefault();
                inputRef.current?.click();
            }
        }, ref: containerRef }));
});
export default withTestIds(RadioButtonCard, getRadioButtonCardTestIds);
//# sourceMappingURL=RadioButtonCard.js.map