import React, { useEffect, useState, } from "react";
import "react-toggle/style.css";
const RadioButtons = (props) => {
    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", { role: "radiogroup", "data-testid": props.dataTestId },
            React.createElement("div", { className: "space-y-2 mt-2" }, props.options &&
                props.options.map((radioButton, i) => {
                    let className = "relative block cursor-pointer rounded-lg border bg-white px-6 py-4 shadow-sm focus:outline-none sm:flex sm:justify-between";
                    if (value === radioButton.value) {
                        className =
                            "relative block cursor-pointer rounded-lg border bg-white px-6 py-4 shadow-sm focus:outline-none sm:flex sm:justify-between border-indigo-500 ring-2 ring-indigo-500";
                    }
                    return (React.createElement("label", { key: i, className: className, "data-testid": `card-select-option-${radioButton.value}`, onClick: () => {
                            handleChange(radioButton.value);
                        } },
                        React.createElement("input", { type: "radio", className: "sr-only", "aria-labelledby": `server-size-${i}-label`, "aria-describedby": `server-size-${i}-description-0 server-size-${i}-description-1`, defaultChecked: props.initialValue === radioButton.value }),
                        React.createElement("span", { className: "flex items-center" },
                            React.createElement("span", { className: "flex flex-col text-sm" },
                                React.createElement("span", { id: `server-size-${i}-label`, className: "font-medium text-gray-900" }, radioButton.title),
                                React.createElement("span", { id: `server-size-${i}-description-0`, className: "text-gray-500" },
                                    React.createElement("span", { className: "block sm:inline" },
                                        " ",
                                        radioButton.description)))),
                        React.createElement("span", { id: `server-size-${i}-description-1`, className: "mt-2 flex text-sm sm:mt-0 sm:ml-4 sm:flex-col sm:text-right" },
                            React.createElement("span", { className: "font-medium text-gray-900" }, radioButton.sideTitle),
                            React.createElement("span", { className: "ml-1 text-gray-500 sm:ml-0" }, radioButton.sideDescription)),
                        React.createElement("span", { className: "pointer-events-none absolute -inset-px rounded-lg border-2", "aria-hidden": "true" })));
                }))),
        props.error && (React.createElement("p", { "data-testid": "error-message", className: "mt-1 text-sm text-red-400" }, props.error))));
};
export default RadioButtons;
//# sourceMappingURL=GroupRadioButtons.js.map