import { cnb } from "cnbuilder";
import { bem } from "../utils/bem.js";
const styles = bem("rmd-box");
/**
 * Applies the `className` from the `Box` component to any element.
 *
 * @example Simple Example
 * ```tsx
 * return (
 *   <form className={box({ stacked: true})}>
 *     {children}
 *   </form>
 * );
 * ```
 *
 * If custom media query breakpoints are required, use the {@link boxStyles}
 * function instead which will also set the CSS variables.
 *
 * @see {@link boxStyles}
 * @since 6.0.0
 */ export function box(options = {}) {
    const { className, align = "", grid, gridName = "", gridColumns = "fit", gridItemSize, gridAutoRows, justify = "", stacked, reversed, fullWidth, disableGap, disableWrap, disablePadding } = options;
    let phoneColumns;
    let phoneItemSize;
    let tabletColumns;
    let tabletItemSize;
    let desktopColumns;
    let desktopItemSize;
    let largeDesktopColumns;
    let largeDesktopItemSize;
    if (gridColumns && typeof gridColumns === "object") {
        ({ phone: phoneColumns, tablet: tabletColumns, desktop: desktopColumns, largeDesktop: largeDesktopColumns } = gridColumns);
    }
    if (gridItemSize && typeof gridItemSize === "object") {
        ({ phone: phoneItemSize, tablet: tabletItemSize, desktop: desktopItemSize, largeDesktop: largeDesktopItemSize } = gridItemSize);
    }
    const isItemSizeEnabled = (value)=>grid && (!!value || value === 0);
    const isColumnsEnabled = (value)=>grid && typeof value === "number";
    return cnb(styles({
        gap: !disableGap,
        "gap-h": disableGap === "row",
        "gap-v": disableGap === "column",
        wrap: !disableWrap,
        padded: !disablePadding,
        column: stacked && !reversed,
        reverse: !stacked && reversed,
        "column-reverse": stacked && reversed,
        "full-width": fullWidth,
        grid,
        "grid-fill": grid && gridColumns === "fill",
        "grid-size": isColumnsEnabled(gridColumns),
        "grid-phone": grid && (phoneColumns || phoneItemSize),
        "grid-phone-size": isColumnsEnabled(phoneColumns) || isItemSizeEnabled(phoneItemSize),
        "grid-tablet": grid && (tabletColumns || tabletItemSize),
        "grid-tablet-size": isColumnsEnabled(tabletColumns) || isItemSizeEnabled(tabletItemSize),
        "grid-desktop": grid && (desktopColumns || desktopItemSize),
        "grid-desktop-size": isColumnsEnabled(desktopColumns) || isItemSizeEnabled(desktopItemSize),
        "grid-large-desktop": grid && (largeDesktopColumns || largeDesktopItemSize),
        "grid-large-desktop-size": isColumnsEnabled(largeDesktopColumns) || isItemSizeEnabled(largeDesktopItemSize),
        "grid-auto-rows": grid && gridAutoRows,
        [gridName]: grid && gridName,
        "align-start": align === "start" || align === "flex-start",
        "align-center": align === "center",
        "align-end": align === "end" || align === "flex-end",
        "align-stretch": align === "stretch",
        "justify-center": justify === "center",
        "justify-start": justify === "start" || justify === "flex-start",
        "justify-end": justify === "end" || justify === "flex-end",
        "justify-stretch": justify === "stretch",
        "justify-around": justify === "space-around",
        "justify-between": justify === "space-between",
        "justify-evenly": justify === "space-evenly"
    }), className);
}
/**
 * @since 6.0.0
 * @internal
 */ function applyBoxVar(options) {
    const { type, media, style, value } = options;
    const expectedType = type === "columns" ? "number" : "string";
    if (typeof value !== expectedType) {
        return style;
    }
    const suffix = type === "columns" ? type : "item-min-size";
    let varName = `--rmd-box-${suffix}`;
    if (media === "largeDesktop") {
        varName = `--rmd-box-large-desktop-${suffix}`;
    } else if (media) {
        varName = `--rmd-box-${media}-${suffix}`;
    }
    return {
        ...style,
        [varName]: value
    };
}
/**
 * @since 6.0.0
 * @internal
 */ const BREAKPOINTS = [
    "phone",
    "tablet",
    "desktop",
    "largeDesktop"
];
/**
 * @since 6.0.0
 * @internal
 */ function applyBoxVarGroup(options) {
    const { style: propStyle, value, type } = options;
    let style = applyBoxVar({
        type,
        style: propStyle,
        media: "",
        value
    });
    if (value && typeof value === "object") {
        BREAKPOINTS.forEach((media)=>{
            style = applyBoxVar({
                type,
                style,
                media,
                value: value[media]
            });
        });
    }
    return style;
}
/**
 * Used to apply the styles from the `Box` component to any element by
 * providing a `style` object with CSS variables and a `className`.
 *
 * If you do not need to  use
 *
 * @example Simple Example
 * ```tsx
 * return (
 *   <form
 *     {...boxStyles({
 *        grid: true,
 *        gridColumns: {
 *          phone: 1,
 *          desktop: 3,
 *        },
 *        gridItemSize:  {
 *          tablet: "12rem",
 *        },
 *     })}
 *   >
 *     {children}
 *   </form>
 * );
 * ```
 *
 * @see {@link box}
 * @since 6.0.0
 */ export function boxStyles(options) {
    const { style: propStyle, gridColumns, gridItemSize } = options;
    let style = applyBoxVarGroup({
        type: "columns",
        style: propStyle,
        value: gridColumns
    });
    style = applyBoxVarGroup({
        type: "size",
        style,
        value: gridItemSize
    });
    return {
        style,
        className: box(options)
    };
}

//# sourceMappingURL=styles.js.map