import classNames from "clsx";
import { useTheme } from "../Flowbite/ThemeContext";
import ButtonGroup from "./ButtonGroup";
import { createMemo, mergeProps, splitProps } from "solid-js";
import { Dynamic } from "solid-js/web";
const defaultProps = {
    color: "info",
    disabled: false,
    outline: false,
    pill: false,
    positionInGroup: "none",
    size: "md",
};
const ButtonComponent = (p) => {
    const [props, theirProps] = splitProps(mergeProps(defaultProps, p), [
        "children",
        "color",
        "disabled",
        "gradientDuoTone",
        "gradientMonochrome",
        "href",
        "label",
        "outline",
        "pill",
        "fullSized",
        "positionInGroup",
        "size",
        "class",
        "ref",
    ]);
    const isLink = createMemo(() => typeof props.href !== "undefined");
    const themeProps = useTheme();
    const theme = createMemo(() => themeProps.theme.button);
    const groupTheme = createMemo(() => themeProps.theme.buttonGroup);
    return (<Dynamic component={isLink() ? "a" : "button"} class={classNames(props.disabled && theme().disabled, !props.gradientDuoTone && !props.gradientMonochrome && theme().color[props.color], props.gradientDuoTone &&
            !props.gradientMonochrome &&
            theme().gradientDuoTone[props.gradientDuoTone], !props.gradientDuoTone &&
            props.gradientMonochrome &&
            theme().gradient[props.gradientMonochrome], props.positionInGroup &&
            groupTheme().position[props.positionInGroup], props.outline && (theme().outline.color[props.color] ?? theme().outline.color.default), theme().base, theme().pill[props.pill ? "on" : "off"], props.fullSized && theme().fullSized, props.class)} disabled={props.disabled} href={props.href} type={isLink() ? undefined : "button"} ref={props.ref} {...theirProps}>
      <span class={classNames(theme().inner.base, theme().inner.position[props.positionInGroup], theme().outline[props.outline ? "on" : "off"], theme().outline.pill[props.outline && props.pill ? "on" : "off"], theme().size[props.size], props.outline && !theme().outline.color[props.color] && theme().inner.outline)}>
        {props.children}
        {typeof props.label !== "undefined" && (<span class={theme().label} data-testid="flowbite-button-label">
            {props.label}
          </span>)}
      </span>
    </Dynamic>);
};
ButtonComponent.displayName = "Button";
export const Button = Object.assign(ButtonComponent, {
    Group: ButtonGroup,
});