import ObjectID from "../../../Types/ObjectID";
import React, { useEffect, useState, } from "react";
const BasicRadioButton = (props) => {
    const [id] = useState(props.id || ObjectID.generate().toString());
    const [value, setValue] = useState("");
    useEffect(() => {
        if (props.initialValue) {
            setValue(props.initialValue);
            props.onChange(props.initialValue);
        }
        else {
            setValue("");
            props.onChange("");
        }
    }, [props.initialValue]);
    const handleChange = (content) => {
        setValue(content);
        props.onChange(content);
    };
    return (React.createElement("div", null,
        React.createElement("fieldset", { id: id, className: "mt-4" },
            React.createElement("div", { className: "space-y-4" }, props.options.map((radioButton, i) => {
                const checked = value === radioButton.value;
                return (React.createElement("div", { key: i },
                    React.createElement("div", { className: "flex items-center" },
                        React.createElement("input", { type: "radio", name: id, checked: checked, onClick: () => {
                                handleChange(radioButton.value);
                            }, className: "h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600" }),
                        React.createElement("label", { className: "ml-3 block text-sm font-medium leading-6 text-gray-900" },
                            React.createElement("span", { className: "font-medium text-gray-900" }, radioButton.title),
                            React.createElement("span", { className: "ml-1 text-gray-500 sm:ml-0" }, radioButton.description))),
                    checked && radioButton.children));
            }))),
        props.error && (React.createElement("p", { "data-testid": "error-message", className: "mt-1 text-sm text-red-400" }, props.error))));
};
export default BasicRadioButton;
//# sourceMappingURL=BasicRadioButtons.js.map