import { mergeProps, splitProps } from "solid-js";
import classNames from "./classnames";
import { useBootstrapPrefix } from "./ThemeProvider";
import { Dynamic } from "solid-js/web";
const DEVICE_SIZES = ["xxl", "xl", "lg", "md", "sm", "xs"];
export function useCol(o) {
    const [local, props] = splitProps(o, ["as", "bsPrefix", "className"]);
    const bsPrefix = useBootstrapPrefix(local.bsPrefix, "col");
    const spans = [];
    const classes = [];
    DEVICE_SIZES.forEach((brkPoint) => {
        const propValue = props[brkPoint];
        let span;
        let offset;
        let order;
        if (typeof propValue === "object" && propValue != null) {
            ({ span, offset, order } = propValue);
        }
        else {
            span = propValue;
        }
        const infix = brkPoint !== "xs" ? `-${brkPoint}` : "";
        if (span)
            spans.push(span === true ? `${bsPrefix}${infix}` : `${bsPrefix}${infix}-${span}`);
        if (order != null)
            classes.push(`order${infix}-${order}`);
        if (offset != null)
            classes.push(`offset${infix}-${offset}`);
    });
    const [_, cleanedProps] = splitProps(props, DEVICE_SIZES);
    return [
        mergeProps(cleanedProps, {
            get className() {
                return classNames(local.className, ...spans, ...classes);
            },
        }),
        {
            get as() {
                return local.as;
            },
            get bsPrefix() {
                return bsPrefix;
            },
            get spans() {
                return spans;
            },
        },
    ];
}
const Col = (p) => {
    const [useProps, meta] = useCol(p);
    const [local, colProps] = splitProps(useProps, ["className"]);
    return (<Dynamic component={meta.as ?? "div"} {...colProps} className={classNames(local.className, !meta.spans.length && meta.bsPrefix)}>
      {colProps.children}
    </Dynamic>);
};
export default Col;