import type { JSX, ValidComponent } from "@solidjs/web";
/**
 * `<Autocomplete.Trigger>` — same behavior as `<Combobox.Trigger>` but
 * without the `placeholder` state.
 */

import { dynamic } from "@solidjs/web";
import { createMemo, omit } from "solid-js";
import type { ComboboxSide } from "../../combobox/positioner/positioner-context";
import {
	type ComboboxRootChangeEventDetails,
	useComboboxRootContext,
} from "../../combobox/root/combobox-root-context";
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";

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

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

/**
 * A button that opens the popup. Renders a `<button>` element.
 */
export function AutocompleteTrigger(
	props: AutocompleteTriggerProps,
): 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 } = useButton({
		disabled,
		focusableWhenDisabled: () => false,
		native: nativeButton,
	});

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

	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,
		"aria-haspopup": "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,
		// triggerStateAttributesMapping projection.
		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-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, 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))}
		/>
	);
}