import type { JSX, ValidComponent } from "@solidjs/web";
import { dynamic } from "@solidjs/web";
import { createEffect, createMemo, omit, onCleanup, untrack } from "solid-js";
import { composeRefs, userRef } from "../../internals/compose-refs";
import { useClick } from "../../internals/floating-ui/hooks/use-click";
import { useInteractions } from "../../internals/floating-ui/hooks/use-interactions";
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";
import type { PopoverHandle } from "../store/popover-store";

export interface PopoverTriggerState {
	disabled: boolean;
	open: boolean;
}

export interface PopoverTriggerProps<Payload = unknown>
	extends NativeButtonProps,
		BaseUIComponentProps<"button", PopoverTriggerState> {
	/**
	 * Tag/component to render. Defaults to `"button"`. Replaces the
	 * pre-spike `render` prop (axis G).
	 */
	as?: ValidComponent;
	handle?: PopoverHandle<Payload> | undefined;
	id?: string | undefined;
	payload?: Payload | undefined;
}

/**
 * A button that opens the popover. Renders a `<button>` by default.
 */
export function PopoverTrigger<Payload = unknown>(
	props: PopoverTriggerProps<Payload>,
): JSX.Element {
	const root = usePopoverRootContext();

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

	const click = useClick(root.floatingRootContext, {
		enabled: true,
	});

	const localInteractions = useInteractions([click]);

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

	const store = () => props.handle?.store ?? root.store;

	const isActive = createMemo<boolean>(() => {
		const id = props.id;
		if (id === undefined) return true;
		return root.activeTriggerId() === id;
	});

	const state = createMemo<PopoverTriggerState>(() => ({
		disabled: disabled(),
		open: root.open() && isActive(),
	}));

	let registeredId: string | null = null;
	let registeredElement: HTMLElement | null = null;
	const setRef = (el: HTMLElement | null): void =>
		untrack(() => {
			const id = props.id;
			const s = store();

			if (registeredId !== null && registeredElement !== null) {
				const current = s.context.triggerElements.getById(registeredId);
				if (current === registeredElement) {
					s.context.triggerElements.delete(registeredId);
				}
				registeredId = null;
				registeredElement = null;
			}

			if (el && id !== undefined) {
				s.context.triggerElements.add(id, el);
				registeredId = id;
				registeredElement = el;
			}

			if (id === undefined || isActive()) {
				root.setTriggerElement(el);
			}
		});

	onCleanup(() => {
		if (registeredId !== null && registeredElement !== null) {
			const s = store();
			const current = s.context.triggerElements.getById(registeredId);
			if (current === registeredElement) {
				s.context.triggerElements.delete(registeredId);
			}
		}
	});

	const onClickCapture = (event: MouseEvent): void => {
		const id = props.id;
		if (id !== undefined) {
			root.setActiveTriggerId(id);
		}
		if ("payload" in props) {
			root.setPayload(props.payload);
		}
		void event;
	};

	createEffect(
		() => ({ active: isActive(), payload: props.payload }),
		({ active, payload }) => {
			if (active && "payload" in props) {
				root.setPayload(payload);
			}
		},
	);

	const stateAttrs = {
		get "data-popup-open"() {
			return state().open ? "" : undefined;
		},
		get "data-pressed"() {
			return state().open ? "" : undefined;
		},
		onClick: onClickCapture,
		get id() {
			return props.id;
		},
	};

	const userClassStyle = resolveClassStyle(props, () => state());

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

		"disabled",
		"nativeButton",
		"handle",
		"payload",
	);

	let merged: Record<string, unknown> = mergeRootProps(
		root.interactions.getReferenceProps(),
		localInteractions.getReferenceProps(),
	);
	merged = mergeRootProps(merged, buttonProps);
	merged = mergeRootProps(merged, stateAttrs);
	merged = mergeRootProps(merged, userClassStyle);
	merged = mergeRootProps(merged, userProps);

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