import classNames from "clsx";
import { mergeDeep } from "../../helpers/mergeDeep";
import { useTheme } from "../Flowbite";
import { NavbarBrand } from "./NavbarBrand";
import { NavbarCollapse } from "./NavbarCollapse";
import { NavbarContext } from "./NavbarContext";
import { NavbarLink } from "./NavbarLink";
import { NavbarToggle } from "./NavbarToggle";
import { createMemo, createSignal, mergeProps, splitProps, } from "solid-js";
const NavbarComponent = p => {
    const defaultProps = { theme: {}, fluid: false };
    const [local, props] = splitProps(mergeProps(defaultProps, p), [
        "class",
        "children",
        "theme",
        "fluid",
        "rounded",
        "border",
        "menuOpen",
    ]);
    const theme = createMemo(() => mergeDeep(useTheme().theme.navbar.root, local.theme));
    const [isOpen, setIsOpen] = createSignal(local.menuOpen);
    return (<NavbarContext.Provider value={{
            get isOpen() {
                return isOpen();
            },
            setIsOpen,
        }}>
      <nav class={classNames(theme().base, theme().bordered[local.border ? "on" : "off"], theme().rounded[local.rounded ? "on" : "off"], local.class)} {...props}>
        <div class={classNames(theme().inner.base, theme().inner.fluid[local.fluid ? "on" : "off"])}>
          {local.children}
        </div>
      </nav>
    </NavbarContext.Provider>);
};
export const Navbar = Object.assign(NavbarComponent, {
    Brand: NavbarBrand,
    Collapse: NavbarCollapse,
    Link: NavbarLink,
    Toggle: NavbarToggle,
});