import type { JSX, ValidComponent } from "@solidjs/web";
import { dynamic } from "@solidjs/web";
import { createMemo, omit } from "solid-js";
import {
	createChangeEventDetails,
	REASONS,
} from "../../internals/change-event-details";
import { composeRefs, userRef } from "../../internals/compose-refs";
import { stopEvent } from "../../internals/floating-ui/utils/event";
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 { useComboboxChipContext } from "../chip/chip-context";
import {
	findItemIndex,
	type ItemEqualityComparer,
} from "../internals/item-equality";
import {
	type ComboboxRootChangeEventDetails,
	useComboboxRootContext,
} from "../root/combobox-root-context";

export interface ComboboxChipRemoveState {
	disabled: boolean;
}

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

/**
 * A button to remove a chip. Renders a `<button>` element.
 */
export function ComboboxChipRemove(
	props: ComboboxChipRemoveProps,
): JSX.Element {
	const root = useComboboxRootContext();
	const chip = useComboboxChipContext();

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

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

	const state = createMemo<ComboboxChipRemoveState>(() => ({
		disabled: disabled(),
	}));

	function clearActiveIndexForRemovedItem(removedItem: unknown): void {
		const activeIndex = root.activeIndex();
		if (activeIndex == null) return;
		const removedIndex = findItemIndex(
			root.valuesRef.current,
			removedItem,
			root.isItemEqualToValue() as ItemEqualityComparer<unknown, unknown>,
		);
		if (removedIndex !== -1 && activeIndex === removedIndex) {
			root.setIndices({
				activeIndex: null,
				type: root.keyboardActiveRef.current ? "keyboard" : "pointer",
			});
		}
	}

	function removeChip(event: MouseEvent | KeyboardEvent): void {
		const details = createChangeEventDetails(
			REASONS.chipRemovePress,
			event,
		) as ComboboxRootChangeEventDetails;
		const selected = root.selectedValue() as unknown;
		if (!Array.isArray(selected)) return;
		const index = chip.index();
		const removedItem = selected[index];
		clearActiveIndexForRemovedItem(removedItem);
		root.setSelectedValue(
			selected.filter((_, i) => i !== index) as never,
			details,
		);
		root.inputRef.current?.focus();
	}

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

	function onClick(event: MouseEvent): void {
		if (disabled() || readOnly()) return;
		removeChip(event);
	}

	function onKeyDown(event: KeyboardEvent): void {
		if (disabled() || readOnly()) return;
		if (event.key === "Enter" || event.key === " ") {
			stopEvent(event);
			removeChip(event);
		}
	}

	const internal = {
		tabIndex: -1,
		onMouseDown,
		onClick,
		onKeyDown,
		get "data-disabled"() {
			return state().disabled ? "" : 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 Tag = dynamic(() => props.as ?? "button");
	return <Tag {...merged} ref={composeRefs(buttonRef, userRef(props))} />;
}