import classNames from "clsx";
import { useTheme } from "../Flowbite";
import { HelperText } from "../HelperText";
import { createMemo, mergeProps, splitProps } from "solid-js";
import { Dynamic } from "solid-js/web";
export const Select = p => {
    const defaultProps = { sizing: "md", color: "gray" };
    const [local, props] = splitProps(mergeProps(defaultProps, p), [
        "class",
        "children",
        "ref",
        "sizing",
        "shadow",
        "helperText",
        "addon",
        "icon",
        "color",
    ]);
    const theme = createMemo(() => useTheme().theme.select);
    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>)}
        <select class={classNames(theme().field.select.base, theme().field.select.colors[local.color], theme().field.select.withIcon[local.icon ? "on" : "off"], theme().field.select.withAddon[local.addon ? "on" : "off"], theme().field.select.withShadow[local.shadow ? "on" : "off"], theme().field.select.sizes[local.sizing])} {...props} ref={local.ref}>
          {local.children}
        </select>
        {local.helperText && <HelperText color={local.color}>{local.helperText}</HelperText>}
      </div>
    </div>);
};