"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.RadioButtons = void 0;
const react_1 = __importDefault(require("react"));
const usePropState_1 = require("../../hooks/usePropState");
const Text_1 = require("../Text");
const varsUtilities_1 = require("../../varsUtilities");
const inlines_1 = require("inlines");
const RadioButton_1 = require("./RadioButton");
const RadioButtons = ({ color = 'primary', data, direction, disabled, onChange, value, }) => {
    const selectedIndex = data?.findIndex((item) => item.value === value);
    const [active, setActive] = (0, usePropState_1.usePropState)(selectedIndex);
    return (react_1.default.createElement(inlines_1.styled.div, { style: {
            display: 'flex',
            flexDirection: direction === 'horizontal' ? 'row' : 'column',
            gap: direction === 'horizontal' ? 16 : 0,
            pointerEvents: disabled ? 'none' : 'auto',
            opacity: disabled ? 0.6 : 1,
        } }, data?.map((item, index) => {
        const onClick = () => {
            setActive(index);
            onChange?.(data[index].value);
        };
        return (react_1.default.createElement(inlines_1.styled.div, { key: index, style: {
                display: 'flex',
                marginBottom: 8,
                marginTop: 8,
            } },
            react_1.default.createElement(RadioButton_1.RadioButton, { active: active === index, color: color, value: data[active], onClick: onClick }),
            item.label && (react_1.default.createElement(inlines_1.styled.div, { style: {
                    marginLeft: 12,
                    marginTop: '-5px',
                    cursor: 'pointer',
                    display: 'flex',
                    flexDirection: 'column',
                }, onClick: onClick },
                react_1.default.createElement(Text_1.Text, { selectable: "none", size: 14, weight: "medium" }, item.label),
                react_1.default.createElement(Text_1.Text, { selectable: "none", style: { color: (0, varsUtilities_1.color)('content', 'default', 'secondary') } }, item.description)))));
    })));
};
exports.RadioButtons = RadioButtons;
//# sourceMappingURL=index.js.map