import classNames from "clsx";
import { mergeDeep } from "../../helpers/mergeDeep";
import { useTheme } from "../Flowbite";
import { createMemo, createSignal, createUniqueId, mergeProps, splitProps, } from "solid-js";
export const ToggleSwitch = p => {
    const defaultProps = { color: "blue", theme: {} };
    const [local, props] = splitProps(mergeProps(defaultProps, p), [
        "checked",
        "disabled",
        "color",
        "label",
        "name",
        "onChange",
        "class",
        "theme",
    ]);
    const theme = createMemo(() => mergeDeep(useTheme().theme.toggleSwitch, local.theme));
    const [checked, setChecked] = createSignal(local.checked);
    const id = createUniqueId();
    const toggle = () => {
        setChecked(!checked());
        local.onChange(checked());
    };
    const handleClick = (event) => {
        event.preventDefault();
        toggle();
    };
    const handleKeyPress = (event) => {
        event.preventDefault();
    };
    return (<>
      {local.name && local.checked && (<input checked={checked()} hidden name={local.name} readOnly type="checkbox" class="sr-only"/>)}
      <button aria-checked={local.checked} aria-labelledby={`${id}-flowbite-toggleswitch-label`} disabled={local.disabled} id={`${id}-flowbite-toggleswitch`} onClick={handleClick} onKeyPress={handleKeyPress} role="switch" tabIndex={0} type="button" class={classNames(theme().base, theme().active[local.disabled ? "off" : "on"], local.class)} {...props}>
        <div class={classNames(theme().toggle.base, theme().toggle.checked[local.checked ? "on" : "off"], !local.disabled && theme().toggle.checked.color[local.color])}/>
        <span data-testid="flowbite-toggleswitch-label" id={`${id}-flowbite-toggleswitch-label`} class={theme().label}>
          {local.label}
        </span>
      </button>
    </>);
};