import { mergeProps, splitProps, useContext } from "solid-js";
import classNames from "./classnames";
import { createControlledProp, Nav as BaseNav, } from "solid-bootstrap-core";
import { useBootstrapPrefix } from "./ThemeProvider";
import NavbarContext from "./NavbarContext";
import CardHeaderContext from "./CardHeaderContext";
import NavItem from "./NavItem";
import NavLink from "./NavLink";
const defaultProps = {
    as: "div",
    justify: false,
    fill: false,
};
const Nav = (p) => {
    const [local, props] = splitProps(mergeProps(defaultProps, p), [
        "as",
        "activeKey",
        "defaultActiveKey",
        "bsPrefix",
        "variant",
        "fill",
        "justify",
        "navbar",
        "navbarScroll",
        "className",
        "onSelect",
    ]);
    const [activeKey, onSelect] = createControlledProp(() => local.activeKey, () => local.defaultActiveKey, local.onSelect);
    const bsPrefix = useBootstrapPrefix(local.bsPrefix, "nav");
    let navbarBsPrefix;
    let cardHeaderBsPrefix;
    let isNavbar = false;
    const navbarContext = useContext(NavbarContext);
    const cardHeaderContext = useContext(CardHeaderContext);
    if (navbarContext) {
        navbarBsPrefix = navbarContext.bsPrefix;
        isNavbar = local.navbar == null ? true : local.navbar;
    }
    else if (cardHeaderContext) {
        ({ cardHeaderBsPrefix } = cardHeaderContext);
    }
    return (<BaseNav as={local.as} activeKey={activeKey()} onSelect={onSelect} className={classNames(local.className, {
            [bsPrefix]: !isNavbar,
            [`${navbarBsPrefix}-nav`]: isNavbar,
            [`${navbarBsPrefix}-nav-scroll`]: isNavbar && local.navbarScroll,
            [`${cardHeaderBsPrefix}-${local.variant}`]: !!cardHeaderBsPrefix,
            [`${bsPrefix}-${local.variant}`]: !!local.variant,
            [`${bsPrefix}-fill`]: local.fill,
            [`${bsPrefix}-justified`]: local.justify,
        })} {...props}>
      {props.children}
    </BaseNav>);
};
export default Object.assign(Nav, {
    Item: NavItem,
    Link: NavLink,
});
