import { Column, FlexGrid, RadioTile, Row, Stack, Tooltip, Button, } from "@carbon/react";
import React from "react";
import { Information } from "@carbon/react/icons";
import styled from "styled-components";
const StyledRadioTile = styled(RadioTile) `
	background-color: ${({ $backgroundColor }) => $backgroundColor};
	margin-bottom: 24px;
`;
export const RadioGroupElementSingle = ({ theme, title, label, elements, columns, tooltip, selectedElement, setSelectedElement, }) => {
    const backgroundColor = theme === "dark" ? "#393939" : "#E5E5E5";
    return (React.createElement(React.Fragment, null,
        React.createElement(Stack, { gap: 1 },
            React.createElement("h4", null,
                title,
                tooltip && (
                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                // @ts-ignore
                React.createElement(Tooltip, { label: tooltip, align: "bottom" },
                    React.createElement("span", { className: "onboarding" },
                        React.createElement(Button, { kind: "ghost", renderIcon: Information, iconDescription: "Information", "aria-label": "Information", style: {
                                marginTop: "-10px",
                                backgroundColor: theme === "light" ? "#FFFFFF" : "#161616",
                            } }))))),
            label && React.createElement("p", { className: "cds--modal-header__label" }, label)),
        React.createElement(Stack, { gap: 3 }, elements
            .reduce((result, item, index) => {
            const chunkIndex = Math.floor(index / columns);
            if (!result[chunkIndex]) {
                result[chunkIndex] = [];
            }
            result[chunkIndex].push(item);
            return result;
        }, [])
            .map((row, index) => (React.createElement(FlexGrid, { key: `row-${index}`, style: {
                width: "100%",
                maxWidth: "100%",
                paddingLeft: "0",
                paddingRight: "0",
            } },
            React.createElement(Row, null, row.map((element, index) => (React.createElement(Column, { key: `column-${element.value}-${index}`, style: { maxWidth: `${100 / columns}%` } },
                React.createElement(StyledRadioTile, { "$backgroundColor": backgroundColor, key: `tile-${element.value}-${index}`, checked: (selectedElement ?? "") === element.value, onChange: (value) => {
                        setSelectedElement(value);
                    }, value: element.value }, element.label)))))))))));
};
