import { Stack } from "@mui/material";
import { useEffect, useMemo } from "react";
import { Eventizer, EventizerProvider } from "react-eventizer";
import { useTranslation } from "react-i18next";
import { BrowserRouter } from "react-router-dom";
import { ToastContainer } from "react-toastify";

import { Loader } from "@/common/components/Loader";
import { AppRoutes } from "@/components/AppRoutes";
import { LocationResolver } from "@/components/LocationResolver";
import { DialogsContextProvider } from "@/contexts/dialog/ui/DialogContextProvider";
import { LoadingContextProvider } from "@/contexts/loading/ui/LoadingContext";
import { SignalRProvider } from "@/contexts/signalR/signalr.provider";
import { useGetMe } from "@/contracts/identity";
import { User } from "@/entities";
import {
	AlarmPlayer,
	NavigationMenu,
	ObjectsWatcher,
	useIdentityStore,
} from "@/features";
import { EventMap } from "@/modules/watcher/event-map";
import { Footer } from "@/widgets";
import { Header } from "@/widgets/Header/ui/Header";
import "react-toastify/dist/ReactToastify.css";

export const App = () => {
	const user = useIdentityStore((x) => x.user);
	const { login, logout } = useIdentityStore();
	const { t } = useTranslation("translation");

	const eventBus = useMemo(() => new Eventizer<EventMap>(), []);

	const { data: getMeResponse, isLoading } = useGetMe({
		query: {
			retry: false,
			enabled: !user,
		},
	});

	useEffect(() => {
		if (getMeResponse) {
			login(getMeResponse as User);
		} else {
			logout();
		}
	}, [getMeResponse, login, logout]);

	if (isLoading) {
		return (
			<div className="d-flex gap-2 justify-content-center align-items-center vh-100">
				<Loader />
				{t("loading...")}
			</div>
		);
	}

	const renderAuthorizedContent = () => (
		<SignalRProvider>
			<EventizerProvider bus={eventBus}>
				<Stack
					sx={{
						backgroundColor: "#EFF4FE",
						height: "100vh",
						width: "100vw",
					}}
				>
					<header className="w-full">
						<Header
							authorized={
								<>
									{user && user.role === "Watcher" && (
										<ObjectsWatcher useFullWidth={true} />
									)}

									<NavigationMenu
										isVertical={false}
										onChanged={() => {}}
									/>
								</>
							}
						/>
					</header>

					<main className="w-full grow">
						<AppRoutes />
					</main>

					<footer className="w-full hidden">
						<Footer />
					</footer>

					<ToastContainer />
					<AlarmPlayer />
					<LocationResolver />
				</Stack>

				<DialogsContextProvider />
			</EventizerProvider>
		</SignalRProvider>
	);

	const renderUnauthorizedContent = () => (
		<Stack
			sx={{
				backgroundColor: "#EFF4FE",
				height: "100vh",
				width: "100vw",
			}}
		>
			<header className="w-full">
				<Header authorized={null} />
			</header>

			<main className="w-full grow">
				<AppRoutes />
			</main>

			<footer className="w-full hidden">
				<Footer />
			</footer>

			<ToastContainer />
			<LocationResolver />
		</Stack>
	);

	return (
		<LoadingContextProvider>
			<BrowserRouter
				future={{
					v7_startTransition: true,
					v7_relativeSplatPath: true,
				}}
			>
				{user ? renderAuthorizedContent() : renderUnauthorizedContent()}
			</BrowserRouter>
		</LoadingContextProvider>
	);
};
