import { jsx as _jsx } from "react/jsx-runtime";
// (C) 2024-2026 GoodData Corporation
import { forwardRef, useMemo } from "react";
import cx from "classnames";
import { useWidthValidation } from "./useItemWidthValidation.js";
const getElementClassName = (type, gridWidth) => {
    switch (type) {
        case "root":
            return "gd-grid-layout__container--root";
        case "nested":
            return `gd-grid-layout__container--nested gd-grid-layout__container--nested--width-${gridWidth}`;
        case "section":
            return "gd-grid-layout__section";
        case "leaf-item":
            return "gd-grid-layout__item gd-grid-layout__item--leaf";
        default:
            return "gd-grid-layout__item";
    }
};
export const GridLayoutElement = forwardRef(({ children, className, style, type, layoutItemSize, onMouseLeave, exportData, exportStyles }, ref) => {
    // Fix item width locally if it is bigger than parent width to prevent css-gird render issues.
    // Error is fired on DashboardLayoutWidget with more details.
    const { validWidth } = useWidthValidation(layoutItemSize);
    const classNames = cx(getElementClassName(type, validWidth), `gd-grid-layout__item--span-${validWidth}`, // CSS Grid columns size class name
    className);
    const sanitizedStyle = useMemo(() => ({
        ...style,
        ...exportStyles,
    }), [style, exportStyles]);
    return type === "section" ? (_jsx("section", { className: classNames, style: sanitizedStyle, onMouseLeave: onMouseLeave, ref: ref, ...exportData, children: children })) : (_jsx("div", { className: classNames, style: sanitizedStyle, onMouseLeave: onMouseLeave, ref: ref, ...exportData, children: children }));
});
GridLayoutElement.displayName = "GridLayoutElement";
//# sourceMappingURL=GridLayoutElement.js.map