import IconProp from "../../../Types/Icon/IconProp";
import Icon, { SizeProp } from "../Icon/Icon";
import React from "react";
export function isCardSelectOptionGroup(option) {
    return (option.label !== undefined &&
        Array.isArray(option.options));
}
const CardSelect = (props) => {
    // Normalize options into render groups
    const groups = [];
    let ungroupedOptions = [];
    for (const option of props.options) {
        if (isCardSelectOptionGroup(option)) {
            // Flush any accumulated ungrouped options first
            if (ungroupedOptions.length > 0) {
                groups.push({ label: null, options: ungroupedOptions });
                ungroupedOptions = [];
            }
            groups.push({ label: option.label, options: option.options });
        }
        else {
            ungroupedOptions.push(option);
        }
    }
    if (ungroupedOptions.length > 0) {
        groups.push({ label: null, options: ungroupedOptions });
    }
    let cardIndex = 0;
    return (React.createElement("div", { "data-testid": props.dataTestId },
        React.createElement("div", { role: "radiogroup", "aria-label": "Select an option" }, groups.map((group, groupIndex) => {
            return (React.createElement("div", { key: groupIndex, className: groupIndex > 0 ? "mt-8" : "" },
                group.label && (React.createElement("div", { className: "relative mb-4" },
                    React.createElement("div", { className: "absolute inset-0 flex items-center", "aria-hidden": "true" },
                        React.createElement("div", { className: "w-full border-t border-gray-200" })),
                    React.createElement("div", { className: "relative flex justify-start" },
                        React.createElement("span", { className: "bg-white pr-3 text-xs font-semibold uppercase tracking-wider text-gray-400" }, group.label)))),
                React.createElement("div", { className: props.singleColumn
                        ? "grid grid-cols-1 gap-4"
                        : "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3" }, group.options.map((option) => {
                    const isSelected = props.value === option.value;
                    const currentIndex = cardIndex++;
                    return (React.createElement("div", { key: option.value, tabIndex: props.tabIndex
                            ? props.tabIndex + currentIndex
                            : currentIndex, onClick: () => {
                            props.onChange(option.value);
                        }, onKeyDown: (e) => {
                            if (e.key === "Enter" || e.key === " ") {
                                e.preventDefault();
                                props.onChange(option.value);
                            }
                        }, className: `relative flex cursor-pointer rounded-lg border p-4 shadow-sm focus:outline-none transition-all duration-200 hover:border-indigo-400 hover:shadow-md ${isSelected
                            ? "border-indigo-500 bg-indigo-50/50"
                            : "border-gray-200 bg-white"}`, role: "radio", "aria-checked": isSelected, "data-testid": `card-select-option-${option.value}` },
                        React.createElement("div", { className: "flex w-full items-start" },
                            React.createElement("div", { className: `flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg ${isSelected ? "bg-indigo-100" : "bg-gray-100"}` },
                                React.createElement(Icon, { icon: option.icon, size: SizeProp.Large, className: `h-5 w-5 ${isSelected ? "text-indigo-600" : "text-gray-600"}` })),
                            React.createElement("div", { className: "ml-4 flex-1" },
                                React.createElement("span", { className: `block text-sm font-semibold ${isSelected ? "text-gray-900" : "text-gray-900"}` }, option.title),
                                React.createElement("span", { className: `mt-1 block text-sm ${isSelected ? "text-gray-600" : "text-gray-500"}` }, option.description)),
                            isSelected && (React.createElement("div", { className: "flex-shrink-0 ml-2" },
                                React.createElement(Icon, { icon: IconProp.CheckCircle, size: SizeProp.Large, className: "h-5 w-5 text-indigo-500" }))))));
                }))));
        })),
        props.error && (React.createElement("p", { className: "mt-2 text-sm text-red-600", role: "alert" }, props.error))));
};
export default CardSelect;
//# sourceMappingURL=CardSelect.js.map