import type { JSX, ValidComponent } from "@solidjs/web";
import { dynamic } from "@solidjs/web";
import { createMemo, omit, Show } 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 { useOpenChangeComplete } from "../../internals/popups/use-open-change-complete";
import { resolveClassStyle } from "../../internals/resolve-class-style";
import type {
	BaseUIComponentProps,
	NativeButtonProps,
} from "../../internals/types";
import { useButton } from "../../internals/use-button/use-button";
import {
	type TransitionStatus,
	useTransitionStatus,
} from "../../internals/use-transition-status/use-transition-status";
import {
	type ComboboxRootChangeEventDetails,
	useComboboxRootContext,
} from "../root/combobox-root-context";

export interface ComboboxClearState {
	open: boolean;
	disabled: boolean;
	transitionStatus: TransitionStatus;
}

export interface ComboboxClearProps
	extends NativeButtonProps,
		BaseUIComponentProps<"button", ComboboxClearState> {
	as?: ValidComponent;
	disabled?: boolean | undefined;
	keepMounted?: boolean | undefined;
}

/**
 * Clears the value when clicked. Renders a `<button>` element.
 */
export function ComboboxClear(props: ComboboxClearProps): JSX.Element {
	const root = useComboboxRootContext();

	const disabled = (): boolean => root.disabled() || (props.disabled ?? false);
	const nativeButton = (): boolean => props.nativeButton ?? true;
	const keepMounted = (): boolean => props.keepMounted ?? false;

	const visible = createMemo<boolean>(() => {
		return root.selectedValue() != null || root.inputValue() !== "";
	});

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

	const { mounted, transitionStatus, setMounted } = useTransitionStatus(
		visible,
		() => true,
		() => false,
	);

	useOpenChangeComplete({
		open: visible,
		ref: root.clearRef,
		onComplete: () => {
			if (!visible()) setMounted(false);
		},
	});

	const state = createMemo<ComboboxClearState>(() => ({
		open: root.open(),
		disabled: disabled(),
		transitionStatus: transitionStatus(),
	}));

	function onMouseDown(event: MouseEvent): void {
		event.preventDefault();
	}

	function onClick(event: MouseEvent): void {
		if (disabled() || root.readOnly()) return;
		const details = createChangeEventDetails(
			REASONS.clearPress,
			event,
		) as ComboboxRootChangeEventDetails;
		root.setInputValue("", details);
		root.setSelectedValue(null, details);
		root.setIndices({ activeIndex: null, selectedIndex: null });
		root.inputRef.current?.focus();
	}

	const internal = {
		tabIndex: -1,
		onMouseDown,
		onClick,
		// clearStateAttributesMapping: open → data-popup-open; disabled →
		// data-disabled; transitionStatus → data-starting/ending-style.
		get "data-popup-open"() {
			return state().open ? "" : undefined;
		},
		get "data-disabled"() {
			return state().disabled ? "" : undefined;
		},
		get "data-starting-style"() {
			return state().transitionStatus === "starting" ? "" : undefined;
		},
		get "data-ending-style"() {
			return state().transitionStatus === "ending" ? "" : undefined;
		},
	};

	const userClassStyle = resolveClassStyle(props, () => state());
	const userProps = omit(
		props,
		"as",
		"class",
		"style",
		"attrs",

		"disabled",
		"nativeButton",
		"keepMounted",
	);

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

	const setClearRef = (el: HTMLElement | null): void => {
		root.clearRef.current = el as HTMLButtonElement | null;
	};

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

	return <Show when={keepMounted() || mounted()}>{element}</Show>;
}