import { Button, Column, FlexGrid, Row, SelectableTile, Stack, Tooltip, } from "@carbon/react";
import React from "react";
import { Information } from "@carbon/react/icons";
export const RadioGroupElementMulti = ({ theme, title, label, elements, columns, tooltip, selectedElements, setSelectedElements, }) => {
    const backgroundColor = theme === "dark" ? "#393939" : "#E5E5E5";
    return (React.createElement(React.Fragment, null,
        React.createElement(Stack, { gap: 1 },
            React.createElement("h4", null,
                title,
                (() => {
                    if (tooltip) {
                        return (
                        // 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",
                                    } }))));
                    }
                    else {
                        return React.createElement(React.Fragment, null);
                    }
                })()),
            (() => {
                if (label) {
                    return React.createElement("p", { className: "cds--modal-header__label" }, label);
                }
                return React.createElement(React.Fragment, null);
            })(),
            " "),
        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: `onboarding-radio-row-${index}`, style: {
                width: "100%",
                maxWidth: "100%",
                paddingLeft: "0",
                paddingRight: "0",
            } },
            React.createElement(Row, null, row.map((element) => (React.createElement(Column, { key: `tile-${element.value}`, style: { maxWidth: `${100 / columns}%` } },
                React.createElement(SelectableTile, { style: {
                        backgroundColor,
                        marginBottom: "24px",
                    }, selected: (() => {
                        return selectedElements?.includes(element.value);
                    })(), onClick: () => {
                        if (selectedElements?.includes(element.value)) {
                            setSelectedElements(selectedElements?.filter((e) => e !== element.value));
                        }
                        else {
                            setSelectedElements(selectedElements?.concat([element.value]) || []);
                        }
                    }, value: element.value }, element.label)))))))))));
};
