import { mergeProps, splitProps } from "solid-js";
import classNames from "./classnames";
import { createControlledProp, Nav as BaseNav, } from "solid-bootstrap-core";
import { useBootstrapPrefix } from "./ThemeProvider";
import ListGroupItem from "./ListGroupItem";
const defaultProps = {
    as: "div",
};
const ListGroup = (p) => {
    const [local, props] = splitProps(mergeProps(defaultProps, p), [
        "as",
        "activeKey",
        "defaultActiveKey",
        "bsPrefix",
        "className",
        "variant",
        "horizontal",
        "numbered",
        "onSelect",
    ]);
    const [activeKey, onSelect] = createControlledProp(() => local.activeKey, () => local.defaultActiveKey, local.onSelect);
    const bsPrefix = useBootstrapPrefix(local.bsPrefix, "list-group");
    let horizontalVariant;
    if (local.horizontal) {
        horizontalVariant = local.horizontal === true ? "horizontal" : `horizontal-${local.horizontal}`;
    }
    return (<BaseNav as={local.as} {...props} activeKey={activeKey()} onSelect={onSelect} className={classNames(local.className, bsPrefix, local.variant && `${bsPrefix}-${local.variant}`, horizontalVariant && `${bsPrefix}-${horizontalVariant}`, local.numbered && `${bsPrefix}-numbered`)}>
      {props.children}
    </BaseNav>);
};
export default Object.assign(ListGroup, {
    Item: ListGroupItem,
});