import type { JSX, ValidComponent } from "@solidjs/web";
import { dynamic } from "@solidjs/web";
import { omit } from "solid-js";
import {
	createChangeEventDetails,
	REASONS,
} from "../../internals/change-event-details";
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 { usePopoverRootContext } from "../popover-root-context";

// biome-ignore lint/complexity/noBannedTypes: matches Base UI React — close exposes no state fields.
export type PopoverCloseState = {};

export interface PopoverCloseProps
	extends NativeButtonProps,
		BaseUIComponentProps<"button", PopoverCloseState> {
	/**
	 * Tag/component to render. Defaults to `"button"`. Replaces the
	 * pre-spike `render` prop (axis G).
	 */
	as?: ValidComponent;
}

/**
 * A button that closes the popover. Renders a `<button>` by default.
 */
export function PopoverClose(props: PopoverCloseProps): JSX.Element {
	const root = usePopoverRootContext();

	const disabled = (): boolean => Boolean(props.disabled);
	const nativeButton = (): boolean => props.nativeButton ?? true;

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

	const internal = {
		onClick(event: MouseEvent) {
			const currentTarget = event.currentTarget as HTMLElement | null;
			const details = createChangeEventDetails(
				REASONS.closePress,
				event,
				currentTarget ?? undefined,
			);
			root.setOpen(false, details);
		},
	};

	const userClassStyle = resolveClassStyle(props, () => ({}));

	const userProps = omit(
		props,
		"as",
		"class",
		"style",
		"attrs",

		"disabled",
		"nativeButton",
	);

	let merged: Record<string, unknown> = mergeRootProps(internal, buttonProps);
	merged = mergeRootProps(merged, userClassStyle);
	merged = mergeRootProps(merged, userProps);

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