import { getCookie } from "cookies-next";
import Head from "next/head";
import type { ReactNode } from "react";
import {
	SIDEBAR_COOKIE_NAME,
	Sidebar,
} from "~/components/area-riservata/sidebar";
import { BannerFactory } from "~/components/banners";
import { Footer, MiniFooter } from "~/components/footer";
import { LoadingPage } from "~/components/loading";
import { SiteHeader } from "~/components/navbar/site-header";
import { UserViewProvider } from "~/lib/userViewContext";
import { cn } from "~/lib/utils";
import { useTranslation } from "~/providers/I18nProvider";
import {
	EnforcedSessionContext,
	useSession,
} from "~/providers/SessionProvider";
import type { UsersId } from "~/schemas/public/Users";
import type { ValidSession } from "~/server/api/trpc";
import { api } from "~/utils/api";
import { UserViewHeader } from "./area-riservata/userViewHeader";

interface Props {
	bodyClassName?: string;
	containerClassName?: string;
	children: ReactNode;
	noFooter?: boolean;
	footerClassName?: string;
}
export const Layout = ({
	children,
	noFooter,
	bodyClassName,
	containerClassName,
	footerClassName,
}: Props) => {
	const { data: bannerData } = api.banners.getBannerData.useQuery({
		area_riservata: false,
	});

	return (
		<div className={cn("flex min-h-screen w-full flex-col", bodyClassName)}>
			<SiteHeader />
			{bannerData?.map((banner) => (
				<div key={`banner-elem-${banner.idbanner}`}>
					{BannerFactory(banner)}
				</div>
			))}
			<main className={cn("h-full flex-1 grow", containerClassName)}>
				{children}
			</main>

			{!noFooter && <Footer className={footerClassName} />}
		</div>
	);
};

interface AreaRiservataLayoutProps extends Props {
	ignoreSessionCheck?: boolean;
	noSidebar?: boolean;
}

export const AreaRiservataLayout = ({
	children,
	noSidebar,
	noFooter,
	ignoreSessionCheck,
	bodyClassName,
	containerClassName,
	footerClassName,
}: AreaRiservataLayoutProps) => {
	const { data: bannerData } = api.banners.getBannerData.useQuery({
		area_riservata: true,
	});
	const session = useSession();
	if (!ignoreSessionCheck) {
		if (session.status === "pending")
			return (
				<div
					className={cn(
						"flex h-full min-h-screen flex-col text-clip",
						bodyClassName,
					)}
				>
					<SiteHeader />

					<main
						className={cn(
							"flex h-full flex-1 overflow-auto",
							containerClassName,
						)}
					>
						<div className="flex h-auto w-full flex-col md:flex-row">
							<LoadingPage />
						</div>
					</main>
					{!noFooter && <MiniFooter className={footerClassName} />}
				</div>
			);
		if (session.status !== "success" || !session.user) {
			window.location.reload();
			return (
				<div
					className={cn(
						"flex h-full min-h-screen flex-col text-clip",
						bodyClassName,
					)}
				>
					<SiteHeader />

					<main
						className={cn(
							"flex h-full flex-1 overflow-auto",
							containerClassName,
						)}
					>
						<div className="flex h-auto w-full flex-col md:flex-row">
							<LoadingPage />
						</div>
					</main>
					{!noFooter && <MiniFooter className={footerClassName} />}
				</div>
			);
		}
	}

	return (
		<div
			className={cn(
				"flex h-full min-h-screen flex-col text-clip",
				bodyClassName,
			)}
		>
			<SiteHeader />
			{bannerData?.map((banner) => (
				<div key={`banner-elem-${banner.idbanner}`}>
					{BannerFactory(banner)}
				</div>
			))}
			<main
				className={cn("flex h-full flex-1 overflow-auto", containerClassName)}
			>
				<div className="flex h-auto w-full flex-col md:flex-row">
					{noSidebar ? null : (
						<Sidebar
							defaultOpen={getCookie(SIDEBAR_COOKIE_NAME) === "true"}
							isAdmin={session.user?.isAdmin || false}
						/>
					)}
					<EnforcedSessionContext.Provider value={session as ValidSession}>
						{children}
					</EnforcedSessionContext.Provider>
				</div>
			</main>
			{!noFooter && <MiniFooter className={footerClassName} />}
		</div>
	);
};

export const AreaRiservataLayoutUserView = ({
	children,
}: {
	children: ReactNode & { props: { userId: UsersId } };
}) => {
	const { t } = useTranslation();
	const session = useSession();
	const props = children.props as { userId: UsersId };
	if (session.status === "pending") {
		return <LoadingPage />;
	}
	if (session.status === "error" || !session.user) {
		window.location.reload();
		return <LoadingPage />;
	}
	return (
		<div className="flex h-full min-h-screen flex-col">
			<SiteHeader />
			<main className="flex h-full flex-1 overflow-auto">
				<UserViewProvider userId={props.userId}>
					<EnforcedSessionContext.Provider value={session as ValidSession}>
						<Head>
							<title>{t.heads.area_riservata_titolo}</title>
							<meta
								content={t.heads.area_riservata_description}
								name="description"
							/>
						</Head>
						<div className="flex h-auto w-full flex-col md:flex-row">
							<Sidebar
								defaultOpen={getCookie(SIDEBAR_COOKIE_NAME) === "true"}
								isAdmin
							/>

							<div className="mx-4 my-3 flex-1 overflow-auto">
								<UserViewHeader />

								{children}
							</div>
						</div>
					</EnforcedSessionContext.Provider>
				</UserViewProvider>
			</main>

			<MiniFooter />
		</div>
	);
};