import type { JSX, ValidComponent } from "@solidjs/web";
import { dynamic } from "@solidjs/web";
import { omit } from "solid-js";
import { composeRefs, userRef } from "../internals/compose-refs";
import { mergeRootProps } from "../internals/merge-root-props";
import { resolveClassStyle } from "../internals/resolve-class-style";
import type {
	BaseUIComponentProps,
	NativeButtonProps,
} from "../internals/types";
import { useButton } from "../internals/use-button/use-button";

export interface ButtonState {
	/**
	 * Whether the button should ignore user interaction.
	 */
	disabled: boolean;
}

export interface ButtonProps
	extends NativeButtonProps,
		BaseUIComponentProps<"button", ButtonState> {
	/**
	 * Tag/component to render. Defaults to `"button"`. Replaces the
	 * pre-spike `render` prop (axis G).
	 */
	as?: ValidComponent;
	/**
	 * Whether the button should be focusable when disabled.
	 * @default false
	 */
	focusableWhenDisabled?: boolean | undefined;
}

/**
 * A button component that can be used to trigger actions.
 * Renders a `<button>` element (or `as` override).
 *
 * Solid 2.0-native rewire (§1 wave 1): replaces `renderElement` with
 * `dynamic(() => props.as ?? "button")` and threads the
 * `useButton` reactive bag plus a local `data-disabled` getter through
 * `mergeRootProps`. Consumer's `type` still wins over the primitive's
 * default via `mergeRootProps`'s "user-defined wins" rule.
 */
export function Button(props: ButtonProps): JSX.Element {
	const disabled = (): boolean => Boolean(props.disabled);
	const focusableWhenDisabled = (): boolean | undefined =>
		props.focusableWhenDisabled;
	const nativeButton = (): boolean => props.nativeButton ?? true;

	const { props: buttonProps, ref: buttonRef } = useButton({
		disabled,
		focusableWhenDisabled,
		native: nativeButton,
	});

	// State-attr projection: emit `data-disabled` (presence) when disabled.
	const stateAttrs = {
		get "data-disabled"(): "" | undefined {
			return disabled() ? "" : undefined;
		},
	};

	// Strip our own API props so they don't leak onto the DOM.
	const userStyling = resolveClassStyle(props, () => ({
		disabled: disabled(),
	}));

	const userProps = omit(
		props,
		"class",
		"style",
		"attrs",
		"as",
		"disabled",
		"focusableWhenDisabled",
		"nativeButton",
	);

	// Compose: state-attrs + buttonProps form the "internal" side; userProps
	// forms the "user" side. mergeRootProps gives user precedence on plain keys
	// (so consumer `type="submit"` overrides the primitive's `type="button"`),
	// composes class/style, and chains event handlers (internal first, user
	// gated by defaultPrevented).
	const internal = mergeRootProps(stateAttrs, buttonProps);
	const styledUserProps = mergeRootProps(userStyling, userProps);

	const merged = mergeRootProps(internal, styledUserProps);

	const Tag = dynamic(() => props.as ?? "button");
	return <Tag {...merged} ref={composeRefs(buttonRef, userRef(props))} />;
}