import classNames from "clsx";
import { mergeDeep } from "../../helpers/mergeDeep";
import { useTheme } from "../Flowbite";
import { HelperText } from "../HelperText";
import { createMemo, mergeProps, splitProps } from "solid-js";
import { Dynamic } from "solid-js/web";
const defaultProps = {
    sizing: "md",
    color: "gray",
    theme: {},
};
export const TextInput = (p) => {
    const [local, props] = splitProps(mergeProps(defaultProps, p), [
        "sizing",
        "shadow",
        "helperText",
        "addon",
        "icon",
        "rightIcon",
        "color",
        "class",
        "theme",
        "ref",
    ]);
    const theme = createMemo(() => mergeDeep(useTheme().theme.textInput, local.theme));
    return (<>
      <div class={classNames(theme().base, local.class)}>
        {local.addon && <span class={theme().addon}>{local.addon}</span>}
        <div class={theme().field.base}>
          {local.icon && (<div class={theme().field.icon.base}>
              <Dynamic component={local.icon} class={theme().field.icon.svg}/>
            </div>)}
          {local.rightIcon && (<div data-testid="right-icon" class={theme().field.rightIcon.base}>
              <Dynamic component={local.rightIcon} class={theme().field.rightIcon.svg}/>
            </div>)}
          <input class={classNames(theme().field.input.base, theme().field.input.colors[local.color], theme().field.input.withIcon[local.icon ? "on" : "off"], theme().field.input.withAddon[local.addon ? "on" : "off"], theme().field.input.withShadow[local.shadow ? "on" : "off"], theme().field.input.sizes[local.sizing])} {...props} ref={local.ref}/>
        </div>
      </div>
      {local.helperText && <HelperText color={local.color}>{local.helperText}</HelperText>}
    </>);
};
TextInput.displayName = "TextInput";