import type { JSX, ValidComponent } from "@solidjs/web";
import { dynamic } from "@solidjs/web";
import { createMemo, 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";
import type { NumberFieldRootState } from "../root/number-field-root.tsx";
import { useNumberFieldRootContext } from "../root/number-field-root-context.ts";
import { useNumberFieldButton } from "../root/use-number-field-button.ts";
import { numberFieldDataAttrs } from "../utils/state-attributes-mapping.ts";

export interface NumberFieldIncrementState extends NumberFieldRootState {}

export interface NumberFieldIncrementProps
	extends NativeButtonProps,
		BaseUIComponentProps<"button", NumberFieldIncrementState> {
	/** Tag/component to render. Defaults to `"button"`. */
	as?: ValidComponent;
}

/**
 * A stepper button that increases the field value when clicked. Renders a
 * `<button>` (or `as` override).
 */
export function NumberFieldIncrement(
	props: NumberFieldIncrementProps,
): JSX.Element {
	const context = useNumberFieldRootContext();

	const isMax = (): boolean => {
		const current = context.value();
		return current != null && current >= context.maxWithDefault();
	};

	const disabled = (): boolean =>
		props.disabled === true || context.disabled() || isMax();

	const { props: buttonHandlerProps } = useNumberFieldButton({
		isIncrement: true,
		inputRef: context.inputRef,
		inputValue: context.inputValue,
		disabled,
		readOnly: context.readOnly,
		id: context.id,
		setValue: context.setValue,
		getStepAmount: context.getStepAmount,
		incrementValue: context.incrementValue,
		allowInputSyncRef: context.allowInputSyncRef,
		formatOptionsRef: context.formatOptionsRef,
		valueRef: context.valueRef,
		locale: context.locale,
		lastChangedValueRef: context.lastChangedValueRef,
		onValueCommitted: context.onValueCommitted,
	});

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

	const state = createMemo(
		(): NumberFieldIncrementState => ({
			...context.state(),
			disabled: disabled(),
		}),
	);

	const userStyling = resolveClassStyle(props, () => state());

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

	const styledUserProps = mergeRootProps(userStyling, userProps);

	let merged: Record<string, unknown> = mergeRootProps(
		buttonProps,
		buttonHandlerProps,
	);
	merged = mergeRootProps(merged, numberFieldDataAttrs(state));
	merged = mergeRootProps(merged, styledUserProps);

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

export namespace NumberFieldIncrement {
	export type State = NumberFieldIncrementState;
	export type Props = NumberFieldIncrementProps;
}