import { mergeProps, splitProps, useContext } from "solid-js";
import classNames from "./classnames";
import { useBootstrapPrefix } from "./ThemeProvider";
import NavbarContext from "./NavbarContext";
import { callEventHandler } from "solid-bootstrap-core";
import { Dynamic } from "solid-js/web";
const defaultProps = {
    as: "button",
    label: "Toggle navigation",
};
const NavbarToggle = (p) => {
    const [local, props] = splitProps(mergeProps(defaultProps, p), [
        "as",
        "bsPrefix",
        "className",
        "children",
        "label",
        "onClick",
    ]);
    const bsPrefix = useBootstrapPrefix(local.bsPrefix, "navbar-toggler");
    const context = useContext(NavbarContext);
    const handleClick = (e) => {
        callEventHandler(local.onClick, e);
        context?.onToggle?.();
    };
    if (local.as === "button") {
        props.type = "button";
    }
    return (<Dynamic component={local.as} {...props} type={local.as === "button" ? "button" : undefined} onClick={handleClick} aria-label={local.label} className={classNames(local.className, bsPrefix, !context?.expanded && "collapsed")}>
      {local.children || <span className={`${bsPrefix}-icon`}/>}
    </Dynamic>);
};
export default NavbarToggle;