import { createMemo, mergeProps, splitProps } from "solid-js";
import classNames from "./classnames";
import { makeEventKey, useNavItem } from "solid-bootstrap-core";
import { useBootstrapPrefix } from "./ThemeProvider";
import { Dynamic } from "solid-js/web";
const defaultProps = {};
const ListGroupItem = (p) => {
    const [local, props] = splitProps(mergeProps(defaultProps, p), [
        "as",
        "bsPrefix",
        "active",
        "disabled",
        "eventKey",
        "className",
        "variant",
        "action",
    ]);
    const bsPrefix = useBootstrapPrefix(local.bsPrefix, "list-group-item");
    const [navItemProps, meta] = useNavItem(mergeProps({
        get key() {
            return makeEventKey(local.eventKey, props.href);
        },
        get active() {
            return local.active;
        },
    }, props));
    const handleClick = createMemo(() => (event) => {
        if (local.disabled) {
            event.preventDefault();
            event.stopPropagation();
            return;
        }
        navItemProps.onClick(event);
    });
    const disabledProps = () => local.disabled && props.tabIndex === undefined
        ? {
            tabIndex: -1,
            ["aria-disabled"]: true,
        }
        : {};
    return (<Dynamic component={local.as || (local.action ? (props.href ? "a" : "button") : "div")} {...props} {...navItemProps} {...disabledProps()} onClick={handleClick()} className={classNames(local.className, bsPrefix, meta.isActive && "active", local.disabled && "disabled", local.variant && `${bsPrefix}-${local.variant}`, local.action && `${bsPrefix}-action`)}>
      {props.children}
    </Dynamic>);
};
export default ListGroupItem;