import type { JSX, ValidComponent } from "@solidjs/web";
import { dynamic } from "@solidjs/web";
import { createMemo, omit, untrack } from "solid-js";
import {
	createChangeEventDetails,
	REASONS,
} from "../../internals/change-event-details";
import { composeRefs, userRef } from "../../internals/compose-refs";
import { useTypeahead } from "../../internals/floating-ui/hooks/use-typeahead";
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 { ComboboxSide } from "../positioner/positioner-context";
import {
	type ComboboxRootChangeEventDetails,
	useComboboxRootContext,
} from "../root/combobox-root-context";

export interface ComboboxTriggerState {
	open: boolean;
	disabled: boolean;
	readOnly: boolean;
	required: boolean;
	popupSide: ComboboxSide | null;
	listEmpty: boolean;
	placeholder: boolean;
}

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

/**
 * A button that opens the popup. Renders a `<button>` element.
 */
export function ComboboxTrigger(props: ComboboxTriggerProps): JSX.Element {
	const root = useComboboxRootContext();

	const disabled = (): boolean => root.disabled() || (props.disabled ?? false);
	const nativeButton = (): boolean => props.nativeButton ?? true;
	const listEmpty = createMemo<boolean>(
		() => root.flatFilteredItems().length === 0,
	);

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

	const typeahead = untrack(() =>
		useTypeahead(root.floatingRootContext, {
			enabled: () =>
				!root.open() &&
				!root.readOnly() &&
				!root.disabled() &&
				root.selectionMode() === "single",
			listRef: root.labelsRef,
			activeIndex: () => root.activeIndex(),
			selectedIndex: () => root.selectedIndex(),
			onMatch: (index) => {
				const next = root.valuesRef.current[index];
				if (next === undefined) return;
				const details = createChangeEventDetails(
					REASONS.none,
					undefined,
				) as ComboboxRootChangeEventDetails;
				root.setSelectedValue(next, details);
			},
		}),
	);

	const state = createMemo<ComboboxTriggerState>(() => ({
		open: root.open(),
		disabled: disabled(),
		readOnly: root.readOnly(),
		required: root.required(),
		popupSide: root.popupSide(),
		listEmpty: listEmpty(),
		placeholder: root.selectedValue() == null,
	}));

	function onClick(event: MouseEvent): void {
		if (disabled() || root.readOnly()) return;
		const details = createChangeEventDetails(
			REASONS.triggerPress,
			event,
		) as ComboboxRootChangeEventDetails;
		root.setOpen(!root.open(), details);
		root.inputRef.current?.focus();
	}

	function onKeyDown(event: KeyboardEvent): void {
		if (disabled() || root.readOnly()) return;
		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
			event.preventDefault();
			const details = createChangeEventDetails(
				REASONS.listNavigation,
				event,
			) as ComboboxRootChangeEventDetails;
			root.setOpen(true, details);
			root.inputRef.current?.focus();
		}
	}

	const internal = {
		tabIndex: -1,
		get "aria-haspopup"() {
			return root.grid() ? ("grid" as const) : ("listbox" as const);
		},
		get "aria-expanded"() {
			return root.open() ? ("true" as const) : ("false" as const);
		},
		get "aria-controls"() {
			return root.open() ? (root.listElement()?.id ?? "") : "";
		},
		onClick,
		onKeyDown,
		// State-attr getters.
		get "data-popup-open"() {
			return state().open ? "" : undefined;
		},
		get "data-pressed"() {
			return state().open ? "" : undefined;
		},
		get "data-disabled"() {
			return state().disabled ? "" : undefined;
		},
		get "data-readonly"() {
			return state().readOnly ? "" : undefined;
		},
		get "data-required"() {
			return state().required ? "" : undefined;
		},
		get "data-list-empty"() {
			return state().listEmpty ? "" : undefined;
		},
		get "data-placeholder"() {
			return state().placeholder ? "" : undefined;
		},
		get "data-popup-side"() {
			return state().popupSide ?? undefined;
		},
	};

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

		"disabled",
		"nativeButton",
	);

	let merged: Record<string, unknown> = mergeRootProps(
		buttonProps,
		typeahead.reference ?? {},
	);
	merged = mergeRootProps(merged, internal);
	merged = mergeRootProps(merged, userClassStyle);
	merged = mergeRootProps(merged, userProps);

	const setTriggerEl = (el: HTMLElement | null): void => {
		root.setTriggerElement(el);
	};

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