import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { CodeSnippet } from "./CodeSnippet.js";
/**
 * @internal
 */
export function propCombinationsFor(baseProps) {
    return function (prop, values, additionalProps) {
        return {
            baseProps: {
                ...baseProps,
                ...additionalProps,
            },
            prop,
            values,
        };
    };
}
const GAP = 10;
const PADDING = 5;
/**
 * @internal
 */
export function ComponentTable({ Component, columnsBy, rowsBy, baseProps, debug = false, codeSnippet, cellWidth, cellHeight, align = "flex-start", cellStyle, }) {
    return (_jsx("div", { style: {
            display: "flex",
            flexDirection: "column",
            gap: GAP,
        }, children: rowsBy.map((row) => {
            return (_jsx(ComponentTableRow, { row: row, columnsBy: columnsBy, baseProps: baseProps, Component: Component, debug: debug, codeSnippet: codeSnippet, cellWidth: cellWidth, cellHeight: cellHeight, align: align, cellStyle: cellStyle }, JSON.stringify(row)));
        }) }));
}
/**
 * @internal
 */
export function ComponentTableRow({ Component, columnsBy, row, baseProps, codeSnippet, debug, cellWidth, cellHeight, align, cellStyle, }) {
    return (_jsx("div", { style: {
            display: "flex",
            flexDirection: "column",
            alignItems: "stretch",
            justifyContent: "stretch",
            gap: GAP,
            padding: PADDING,
            border: debug ? "1px solid black" : "none",
        }, children: row.values.map((rowValue) => {
            return (_jsx("div", { style: {
                    border: debug ? "1px solid red" : "none",
                    display: "flex",
                    flexDirection: "row",
                    alignItems: "space-around",
                    justifyContent: "space-around",
                    gap: GAP,
                    padding: PADDING,
                }, children: (columnsBy?.values ?? [undefined]).map((columnValue) => {
                    const props = {
                        ...baseProps,
                        ...(columnsBy?.baseProps ?? {}),
                        ...(row.baseProps ?? {}),
                        [row.prop]: rowValue,
                        ...(columnsBy ? { [columnsBy.prop]: columnValue } : {}),
                    };
                    return (_jsx(ComponentTableCell, { Component: Component, codeSnippet: codeSnippet, props: props, cellWidth: cellWidth, cellHeight: cellHeight, debug: debug, align: align, cellStyle: cellStyle }, JSON.stringify(props)));
                }) }, JSON.stringify({ row, rowValue })));
        }) }));
}
/**
 * @internal
 */
export function ComponentTableCell({ Component, codeSnippet, props, cellWidth, cellHeight, debug, align, cellStyle, }) {
    return (_jsxs("div", { style: {
            display: "flex",
            flexDirection: "column",
            alignItems: align,
            justifyContent: align,
            gap: GAP,
            padding: PADDING,
            border: debug ? "1px solid green" : "none",
            width: cellWidth,
            height: cellHeight,
        }, children: [
            _jsx("div", { style: cellStyle?.(props), children: _jsx(Component, { ...props }) }), codeSnippet ? (_jsx("div", { style: {
                    width: "100%",
                }, children: _jsx(CodeSnippet, { componentName: codeSnippet, componentProps: props }) })) : null] }));
}
