import type { JSX, ValidComponent } from "@solidjs/web";
import { dynamic } from "@solidjs/web";
import { omit } from "solid-js";
import { mergeRootProps } from "../../internals/merge-root-props";
import { resolveClassStyle } from "../../internals/resolve-class-style";
import type { BaseUIComponentProps } from "../../internals/types";
import {
	AvatarRootContext,
	type AvatarRootContextValue,
	type ImageLoadingStatus,
} from "../avatar-root-context";
import { createAvatar } from "../create-avatar.tsx";

export interface AvatarRootState {
	/** The current image-loading status bubbled up from `<Avatar.Image>`. */
	imageLoadingStatus: ImageLoadingStatus;
}

export interface AvatarRootProps
	extends BaseUIComponentProps<"span", AvatarRootState> {
	/** Tag/component to render. Defaults to `"span"`. */
	as?: ValidComponent;
}

/**
 * Displays a user's profile picture, initials, or fallback icon.
 * Renders a `<span>` element (or `as` override).
 *
 * Base UI React maps `imageLoadingStatus` to `null` so no `data-*` attribute
 * is emitted for it on the root.
 */
export function AvatarRoot(props: AvatarRootProps): JSX.Element {
	// Compose the headless primitive — it owns the imageLoadingStatus signal
	// that `<Avatar.Image>` writes into from its load/error handlers.
	const c = createAvatar();

	const contextValue: AvatarRootContextValue = {
		imageLoadingStatus: c.imageLoadingStatus,
		setImageLoadingStatus: c.setImageLoadingStatus,
	};

	const userStyling = resolveClassStyle(props, () => ({
		imageLoadingStatus: c.imageLoadingStatus(),
	}));

	const userHtmlProps = omit(props, "class", "style", "attrs", "as") as Record<
		string,
		unknown
	>;
	const styledUserProps = mergeRootProps(userStyling, userHtmlProps);

	const merged = mergeRootProps({}, styledUserProps);

	const Tag = dynamic(() => props.as ?? "span");
	return (
		<AvatarRootContext value={contextValue}>
			<Tag {...merged} />
		</AvatarRootContext>
	);
}