import type { JSX } from "solid-js";
import { splitProps } from "solid-js";
import { createControllableSignal } from "../../primitives/create-controllable-signal";
import type { ToggleProps } from "./toggle.props";
export type { ToggleProps } from "./toggle.props";

/**
 * A two-state button that can be toggled on and off.
 * Uses aria-pressed to communicate state to assistive technology.
 */
export function Toggle(props: ToggleProps): JSX.Element {
  const [local, rest] = splitProps(props, [
    "pressed",
    "defaultPressed",
    "onPressedChange",
    "disabled",
    "children",
    "onClick",
  ]);

  const [isPressed, setPressed] = createControllableSignal<boolean>({
    value: () => local.pressed,
    defaultValue: () => local.defaultPressed ?? false,
    onChange: local.onPressedChange,
  });

  return (
    <button
      type="button"
      aria-pressed={isPressed()}
      data-state={isPressed() ? "on" : "off"}
      disabled={local.disabled}
      {...rest}
      onClick={() => {
        if (!local.disabled) setPressed(!isPressed());
      }}
    >
      {local.children}
    </button>
  );
}
