import type { FC, PropsWithChildren } from "react";

import { Navigate, useLocation } from "react-router";

import { useAuth } from "@/features/auth";

import { RouteSkeleton } from "./RouteFallback";

const Protected: FC<PropsWithChildren> = (props) => {
	const { children } = props;
	const { ready, user } = useAuth();
	const location = useLocation();
	if (!ready) return <RouteSkeleton variant="shell" />;
	return user
		? (
				<>{children}</>
			)
		: (
				<Navigate
					replace
					state={{ returnTo: `${location.pathname}${location.search}` }}
					to="/login"
				/>
			);
};

const Public: FC<PropsWithChildren> = (props) => {
	const { children } = props;
	const { ready, user } = useAuth();
	const location = useLocation();

	if (!ready) return <RouteSkeleton variant="shell" />;
	const requested = (location.state as null | { returnTo?: string })?.returnTo;
	const returnTo
		= typeof requested === "string"
			&& requested.startsWith("/")
			&& !requested.startsWith("//")
			? requested
			: "/accounts";
	return user ? <Navigate replace to={returnTo} /> : <>{children}</>;
};

export { Protected, Public };