import "antd/dist/reset.css";
import "./App.css";
import { Layout, Spin, Typography } from "antd";
import {
  Constants,
  UseUserSession,
  handleLogout,
  isDevelopmentEnv,
  myFetch,
} from "./utils";
import DashboardLayout from "./Components/DashboardLayout";
import SideBarProvider from "./Contexts/SideBarContext";
import { AppProvider } from "./Contexts/AppContext";
import { UserProfileProvider } from "./Contexts/UserProfileContext";
import { UsersProvider } from "./Contexts/UsersContext";
import HeaderProvider from "./Contexts/HeaderContext";
import { useEffect, useState } from "react";
import StoresProvider from "./Contexts/StoresContext";
import { clarity } from "react-microsoft-clarity";
import { useTranslation } from "react-i18next";
import MyAppLogo from "./Components/MyAppLogo";
import { AuthenticationRoutes } from "./Components/AppRoutes";

export function Loading() {
  const { t } = useTranslation();

  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        flexDirection: "column",
        alignItems: "center",
        height: "100vh",
      }}
    >
      <MyAppLogo
        style={{
          width: 320,
          height: 90,
        }}
      />

      <div
        style={{
          display: "flex",
          alignItems: "center",
          gap: 20,
        }}
      >
        <Spin />

        <Typography.Title
          level={4}
          strong
          style={{
            letterSpacing: 2,
            margin: 0,
          }}
        >
          {t("app.loading")}
        </Typography.Title>
      </div>
    </div>
  );
}

export default function App() {
  const { _, i18n } = useTranslation();

  const { userSession, setUserSession } = UseUserSession();
  const [appUserData, setAppUserData] = useState(null);

  useEffect(() => {
    if (!userSession) return;

    myFetch({
      url: "/user",
      method: "GET",
    })
      .then((data) => {
        setAppUserData(data);

        if (data.user.analytics_enabled) {
          clarity.init(Constants.CLARITY_PROJECT_ID);
        }

        if (data.user.language !== i18n.language) {
          i18n.changeLanguage(data.user.language);
        }
      })
      .catch(() =>
        handleLogout({
          setUserSession: setUserSession,
        })
      );
  }, []);

  if (!userSession) {
    return <AuthenticationRoutes setUserSession={setUserSession} />;
  }

  if (appUserData === null) {
    return <Loading />;
  }

  console.info(
    `\n %c ZeitAdler Dashboard %c ${
      isDevelopmentEnv() ? "Dev" : "Stable"
    } %c \n`,
    "background-color: #555;color: #fff;padding: 3px 2px 3px 3px;border-radius: 3px 0 0 3px;font-family: DejaVu Sans,Verdana,Geneva,sans-serif;text-shadow: 0 1px 0 rgba(1, 1, 1, 0.3)",
    "background-color: #bc81e0;background-image: linear-gradient(90deg, #6878d6, #4d61d6);color: #fff;padding: 3px 3px 3px 2px;border-radius: 0 3px 3px 0;font-family: DejaVu Sans,Verdana,Geneva,sans-serif;text-shadow: 0 1px 0 rgba(1, 1, 1, 0.3)",
    "background-color: transparent"
  );

  return (
    <Layout style={{ minHeight: "100vh" }}>
      <HeaderProvider>
        <SideBarProvider
          options={{
            username: appUserData.user.username,
            permissions: appUserData.permissions,
            accountPlanExpiry:
              appUserData.user.account_plan_expiry === null
                ? undefined
                : appUserData.user.account_plan_expiry,
          }}
        >
          <UserProfileProvider>
            <UsersProvider>
              <AppProvider>
                <StoresProvider options={{ stores: appUserData.stores }}>
                  <DashboardLayout
                    userSession={userSession}
                    setUserSession={setUserSession}
                  />
                </StoresProvider>
              </AppProvider>
            </UsersProvider>
          </UserProfileProvider>
        </SideBarProvider>
      </HeaderProvider>
    </Layout>
  );
}