import type { JSX, ValidComponent } from "@solidjs/web";
/**
 * `<Dialog.Popup>` — the container for dialog contents.
 */

import { dynamic } from "@solidjs/web";
import { createMemo, omit } from "solid-js";
import { composeRefs, userRef } from "../../internals/compose-refs";
import {
	FloatingFocusManager,
	type InteractionType,
} from "../../internals/floating-ui/components/floating-focus-manager";
import { mergeRootProps } from "../../internals/merge-root-props";
import { resolveClassStyle } from "../../internals/resolve-class-style";
import type { BaseUIComponentProps } from "../../internals/types";
import type { TransitionStatus } from "../../internals/use-transition-status/use-transition-status";
import { useDialogRootContext } from "../dialog-root-context";
import { useDialogPortalContext } from "../portal/dialog-portal-context";

const COMPOSITE_KEYS = new Set<string>([
	"ArrowUp",
	"ArrowDown",
	"ArrowLeft",
	"ArrowRight",
	"Home",
	"End",
	"PageUp",
	"PageDown",
]);

export interface DialogPopupState {
	open: boolean;
	transitionStatus: TransitionStatus;
	nested: boolean;
	nestedDialogOpen: boolean;
}

export type DialogFocusHandle =
	| boolean
	| HTMLElement
	| { current: HTMLElement | null }
	| ((
			interactionType: InteractionType,
	  ) => boolean | HTMLElement | null | undefined);

export interface DialogPopupProps
	extends BaseUIComponentProps<"div", DialogPopupState> {
	/**
	 * Tag/component to render. Defaults to `"div"`. Replaces the
	 * pre-spike `render` prop (axis G).
	 */
	as?: ValidComponent;
	initialFocus?: DialogFocusHandle | undefined;
	finalFocus?: DialogFocusHandle | undefined;
}

/**
 * A container for the dialog contents. Renders a `<div>` element.
 */
export function DialogPopup(props: DialogPopupProps): JSX.Element {
	const root = useDialogRootContext();
	useDialogPortalContext();

	const setPopupRef = (el: HTMLElement | null): void => {
		root.popupRef.current = el;
		root.setPopupElement(el);
	};

	const nestedDialogOpen = (): boolean => root.nestedOpenDialogCount() > 0;

	const state = createMemo<DialogPopupState>(() => ({
		open: root.open(),
		transitionStatus: root.transitionStatus(),
		nested: root.nested(),
		nestedDialogOpen: nestedDialogOpen(),
	}));

	const defaultInitialFocus = (interactionType: InteractionType) => {
		if (interactionType === "touch") {
			return root.popupRef.current;
		}
		return true;
	};

	const resolvedInitialFocus = ():
		| boolean
		| HTMLElement
		| { current: HTMLElement | null }
		| ((t: InteractionType) => boolean | HTMLElement | null | undefined) => {
		const value = props.initialFocus;
		if (value === undefined) return defaultInitialFocus;
		return value;
	};

	const resolvedFinalFocus = ():
		| boolean
		| HTMLElement
		| { current: HTMLElement | null }
		| ((t: InteractionType) => boolean | HTMLElement | null | undefined)
		| undefined => {
		return props.finalFocus ?? true;
	};

	const modalValue = (): boolean => root.modal() !== false;
	const closeOnFocusOut = (): boolean => !root.disablePointerDismissal();

	const internal = {
		get role() {
			return root.role();
		},
		tabIndex: -1,
		get hidden() {
			return !root.mounted();
		},
		get "aria-labelledby"() {
			return root.titleId() ?? "";
		},
		get "aria-describedby"() {
			return root.descriptionId() ?? "";
		},
		onKeyDown(event: KeyboardEvent) {
			if (COMPOSITE_KEYS.has(event.key)) {
				event.stopPropagation();
			}
		},
		get style(): JSX.CSSProperties {
			return {
				"--nested-dialogs": String(root.nestedOpenDialogCount()),
			} as JSX.CSSProperties;
		},
		get "data-open"() {
			return state().open ? "" : undefined;
		},
		get "data-closed"() {
			return state().open ? undefined : "";
		},
		get "data-starting-style"() {
			return state().transitionStatus === "starting" ? "" : undefined;
		},
		get "data-ending-style"() {
			return state().transitionStatus === "ending" ? "" : undefined;
		},
		get "data-nested"() {
			return state().nested ? "" : undefined;
		},
		get "data-nested-dialog-open"() {
			return state().nestedDialogOpen ? "" : undefined;
		},
	};

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

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

		"initialFocus",
		"finalFocus",
	);

	let merged: Record<string, unknown> = mergeRootProps(
		root.interactions.getFloatingProps(),
		internal,
	);
	merged = mergeRootProps(merged, userClassStyle);
	merged = mergeRootProps(merged, userProps);

	const Tag = dynamic(() => props.as ?? "div");
	const popupElement = (
		<Tag {...merged} ref={composeRefs(setPopupRef, userRef(props))} />
	);

	return (
		<FloatingFocusManager
			context={root.floatingRootContext}
			openInteractionType={root.openMethod()}
			disabled={!root.mounted()}
			closeOnFocusOut={closeOnFocusOut()}
			initialFocus={resolvedInitialFocus()}
			returnFocus={resolvedFinalFocus()}
			modal={modalValue()}
			restoreFocus="popup"
		>
			{popupElement}
		</FloatingFocusManager>
	);
}