import { Button } from "./Button.js";
import { ErrorState } from "./ErrorState.js";
import { RefreshSignal } from "./RefreshSignal.js";
import { SkeletonGuard } from "./SkeletonGuard.js";
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/QueryBoundary.tsx
function defaultErrorMessage(error) {
	return error instanceof Error && error.message ? error.message : "Failed to load.";
}
function defaultErrorFallback(retry, error) {
	return /* @__PURE__ */ jsx(ErrorState, {
		variant: "inline",
		title: "Something went wrong",
		message: defaultErrorMessage(error),
		action: /* @__PURE__ */ jsx(Button, {
			onClick: retry,
			children: "Retry"
		})
	});
}
function defaultStaleErrorFallback(retry, error) {
	return /* @__PURE__ */ jsxs("div", {
		className: "relative mt-2 flex items-center gap-3 pt-2 text-sm text-danger",
		children: [
			/* @__PURE__ */ jsx(RefreshSignal, { variant: "error" }),
			/* @__PURE__ */ jsx("span", { children: defaultErrorMessage(error) }),
			/* @__PURE__ */ jsx(Button, {
				size: "sm",
				onClick: retry,
				children: "Retry"
			})
		]
	});
}
function useMounted() {
	const [mounted, setMounted] = React.useState(false);
	React.useEffect(() => {
		setMounted(true);
	}, []);
	return mounted;
}
function QueryBoundary({ query, skeleton, children, errorFallback = defaultErrorFallback, staleErrorFallback = defaultStaleErrorFallback, showRefreshing = true }) {
	const mounted = useMounted();
	const { data, isPending, isError, refetch, isFetching, isStale, isPaused, error } = query;
	const settledRef = React.useRef(true);
	const [announce, setAnnounce] = React.useState("");
	React.useEffect(() => {
		if (isFetching) {
			settledRef.current = false;
			return;
		}
		if (!settledRef.current) {
			settledRef.current = true;
			if (data !== void 0) setAnnounce("updated");
		}
	}, [isFetching, data]);
	const effectiveData = mounted ? data : void 0;
	const effectivePending = mounted ? isPending : true;
	const liveRegion = /* @__PURE__ */ jsx("div", {
		role: "status",
		className: "sr-only",
		children: announce
	});
	if (effectiveData !== void 0 && !isError) return /* @__PURE__ */ jsxs("div", {
		"aria-busy": !!isFetching,
		className: "relative",
		children: [
			liveRegion,
			showRefreshing === true && isFetching === true && (typeof isStale === "boolean" ? isStale : true) && !isPaused ? /* @__PURE__ */ jsx(RefreshSignal, {}) : null,
			isPaused ? /* @__PURE__ */ jsx("div", {
				role: "status",
				className: "mb-1 text-xs text-fg-muted",
				children: "Showing cached data"
			}) : null,
			children(effectiveData)
		]
	});
	if (effectiveData !== void 0 && isError) return /* @__PURE__ */ jsxs("div", {
		"aria-busy": !!isFetching,
		className: "relative",
		children: [
			liveRegion,
			children(effectiveData),
			staleErrorFallback(refetch, error)
		]
	});
	if (effectiveData === void 0 && effectivePending) return /* @__PURE__ */ jsx("div", {
		"aria-busy": "true",
		children: /* @__PURE__ */ jsx(SkeletonGuard, {
			pending: true,
			children: skeleton
		})
	});
	return /* @__PURE__ */ jsx("div", {
		ref: (el) => el?.focus(),
		tabIndex: -1,
		role: "alert",
		children: errorFallback(refetch, error)
	});
}
//#endregion
export { QueryBoundary };
