"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.radioGroupStyling = exports.RadioGroup = exports.useRadioContext = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("react");
const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
const Flex_1 = require("../Flex");
const twMerge_1 = require("../../twMerge");
const clsx_1 = tslib_1.__importDefault(require("clsx"));
const twUtils_1 = require("../twUtils");
const RadioContext = React.createContext({
    value: null,
    name: '',
    onChange: (v) => { },
    variant: 'default',
});
const useRadioContext = () => {
    return React.useContext(RadioContext);
};
exports.useRadioContext = useRadioContext;
const Radio = ({ children, checked, onChange, value, name, gapDistance = 10, childrenPosition = 'end', as = 'label', id, tabIndex, disabled, ...props }) => {
    const context = (0, exports.useRadioContext)();
    const { value: contextValue, onChange: contextOnChange, name: contextName, variant } = context;
    const [stateChecked, setStateChecked] = (0, react_1.useState)(false);
    const computedChecked = checked !== undefined
        ? checked
        : contextValue !== undefined
            ? contextValue === value
            : stateChecked;
    const onInputChange = (event) => {
        const newChecked = event.target.checked;
        if (checked === undefined) {
            setStateChecked(newChecked);
        }
        if (onChange) {
            onChange(newChecked, event);
        }
        if (newChecked) {
            contextOnChange(value);
        }
    };
    const gap = React.createElement("div", { style: { marginLeft: gapDistance, display: 'inline-block' } });
    const before = childrenPosition === 'start' ? children : null;
    const beforeGap = childrenPosition === 'start' ? gap : null;
    const after = childrenPosition === 'end' ? children : null;
    const afterGap = childrenPosition === 'end' ? gap : null;
    return (React.createElement(Flex_1.Box, { ...props, className: (0, twMerge_1.twMerge)(`ab-Radio twa:my-2 twa:inline-flex twa:flex-row twa:items-center twa:cursor-pointer twa:relative`, props.className), "data-checked": computedChecked, as: as },
        before,
        beforeGap,
        React.createElement("input", { disabled: disabled, className: (0, clsx_1.default)('ab-Radio-input', 'twa:align-middle', 'twa:m-0', 'twa:rounded-full', 'twa:cursor-pointer', 'twa:position-relative', 'twa:w-[1rem]', 'twa:h-[1rem]', 'twa:min-w-[1rem]', 'twa:min-h-[1rem]', variant === 'default' && 'ab-Radio-input--default', variant === 'text-only' && 'ab-Radio-input--text-only twa:size-0 twa:opacity-0'), id: id, checked: computedChecked, type: "radio", name: name ?? contextName, value: value, tabIndex: tabIndex, onChange: onInputChange }),
        afterGap,
        after));
};
const RadioGroup = (props) => {
    const { orientation, value: _value, name, onRadioChange, children, variant = 'default' } = props;
    const [value, setValue] = (0, useProperty_1.default)(props, 'value', undefined, {
        onChange: (value) => {
            onRadioChange(value);
        },
    });
    return (React.createElement(RadioContext.Provider, { value: { value, onChange: setValue, name, variant } },
        React.createElement(Flex_1.Flex, { className: (0, clsx_1.default)('ab-RadioGroup', props.className), flexDirection: orientation == 'horizontal' ? 'row' : 'column', alignItems: orientation == 'horizontal' ? 'center' : 'flex-start' }, children)));
};
exports.RadioGroup = RadioGroup;
exports.radioGroupStyling = {
    horizontalTextOnly: (0, clsx_1.default)('twa:bg-primarylight twa:rounded-standard twa:p-1 twa:gap-5', {
        'twa:*:flex-1 twa:*:rounded-standard twa:*:p-1 twa:*:m-0': 'default styles for all the radio buttons',
        'twa:*:data-[checked=true]:bg-accent twa:*:data-[checked=true]:text-accent-foreground': 'style the checked state',
        [twUtils_1.targetChildren.focusWithinOutline]: 'styles for when a radio is currently focused - show a ring, so people know they can do keyboard nav with left/right arrow keys',
    }),
};
exports.default = Radio;
