import { mergeProps, splitProps, useContext } from "solid-js";
import classNames from "./classnames";
import { DropdownContext, useDropdownToggle } from "solid-bootstrap-core";
import Button from "./Button";
import InputGroupContext from "./InputGroupContext";
import { useBootstrapPrefix } from "./ThemeProvider";
import { Dynamic } from "solid-js/web";
const defaultProps = {
    as: Button,
};
const DropdownToggle = (p) => {
    const [local, props] = splitProps(mergeProps(defaultProps, p), [
        "as",
        "bsPrefix",
        "split",
        "className",
        "childBsPrefix",
        "ref",
    ]);
    const prefix = useBootstrapPrefix(local.bsPrefix, "dropdown-toggle");
    const dropdownContext = useContext(DropdownContext);
    const isInputGroup = useContext(InputGroupContext);
    if (local.childBsPrefix !== undefined) {
        props.bsPrefix = local.childBsPrefix;
    }
    const [toggleProps] = useDropdownToggle();
    const [toggleLocal, toggleOther] = splitProps(toggleProps, ["ref"]);
    const mergedRef = (ref) => {
        toggleLocal.ref?.(ref);
        local.ref?.(ref);
    };
    // This intentionally forwards size and variant (if set) to the
    // underlying component, to allow it to render size and style variants.
    return (<Dynamic component={local.as} className={classNames(local.className, prefix, local.split && `${prefix}-split`, !!isInputGroup && dropdownContext?.show && "show")} {...toggleOther} {...props} ref={mergedRef}>
      {props.children}
    </Dynamic>);
};
export default DropdownToggle;