import { Container, Group, Skeleton, Stack } from "@mantine/core";
import type { FC, PropsWithChildren } from "react";
import { Suspense } from "react";
import { useTranslation } from "react-i18next";
import { RouteTransition } from "./RouteTransition";

type RouteSkeletonVariant = "auth" | "content" | "shell";
type LazyPageProps = PropsWithChildren<{ variant: RouteSkeletonVariant }>;

const RouteSkeleton: FC<{ variant: RouteSkeletonVariant }> = (props) => {
	const { variant } = props;
	const { t } = useTranslation();

	if (variant === "auth")
		return (
			<Container size={420} py="xl">
				<Stack
					aria-busy="true"
					aria-label={t("states.loadingTitle")}
					role="status"
				>
					<Skeleton height={32} width="45%" />
					<Skeleton height={48} radius="sm" />
					<Skeleton height={48} radius="sm" />
					<Skeleton height={36} radius="sm" />
				</Stack>
			</Container>
		);

	if (variant === "shell")
		return (
			<Stack
				aria-busy="true"
				aria-label={t("states.loadingTitle")}
				gap={0}
				role="status"
			>
				<Group justify="space-between" p="md">
					<Skeleton height={28} width={160} />
					<Skeleton height={28} width={96} />
				</Group>
				<Container fluid p="md">
					<Skeleton height={20} width="30%" />
					<Stack mt="lg">
						<Skeleton height={32} width="30%" />
						<Skeleton height={160} radius="md" />
					</Stack>
				</Container>
			</Stack>
		);

	return (
		<Stack aria-busy="true" aria-label={t("states.loadingTitle")} role="status">
			<Skeleton height={32} width="30%" />
			<Skeleton height={160} radius="md" />
		</Stack>
	);
};

const LazyPage: FC<LazyPageProps> = (props) => {
	const { children, variant } = props;
	return (
		<Suspense fallback={<RouteSkeleton variant={variant} />}>
			{variant === "shell" ? (
				children
			) : (
				<RouteTransition>{children}</RouteTransition>
			)}
		</Suspense>
	);
};

export { LazyPage, RouteSkeleton };