import "antd/dist/reset.css";
import "./App.css";
import Login from "./Pages/Login";
import { Layout, Spin } from "antd";
import { UseUserSession, 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";

export default function App() {
  /*const [notificationApi, notificationContextHolder] =
    notification.useNotification();
 */
  const { userSession, setUserSession } = UseUserSession();
  //const [isWebSocketReady, setIsWebSocketReady] = useState(false);

  const [appUserData, setAppUserData] = useState(null);

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

    myFetch({
      url: "/user",
      method: "GET",
    })
      .then((data) => {
        setAppUserData(data);
      })
      .catch(() => {
        setUserSession();
        window.location.href = "/";
      });
  }, []);

  if (!userSession) {
    return <Login />;
  }

  if (appUserData === null) {
    return (
      <div
        style={{
          height: "100vh",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          gap: 40,
        }}
        className="App"
      >
        <Spin size="large" />

        <span
          style={{
            fontWeight: "bold",
            fontSize: 24,
            letterSpacing: 2,
          }}
        >
          Lade Daten...
        </span>
      </div>
    );
  }

  console.info(
    "\n %c ZeitAdler Dashboard %c BETA %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,
          }}
        >
          <UserProfileProvider>
            <UsersProvider>
              <AppProvider>
                <StoresProvider options={{ stores: appUserData.stores }}>
                  <DashboardLayout
                    userSession={userSession}
                    setUserSession={setUserSession}
                  />
                </StoresProvider>
              </AppProvider>
            </UsersProvider>
          </UserProfileProvider>
        </SideBarProvider>
      </HeaderProvider>
    </Layout>
  );
}

/*
 <WebSocketProvider
                  userSession={userSession}
                  setUserSession={setUserSession}
                  isWebSocketReady={isWebSocketReady}
                  setIsWebSocketReady={setIsWebSocketReady}
                  notificationApi={notificationApi}
                >
                  <ReconnectingView isWebSocketReady={isWebSocketReady} />

                  <DashboardLayout
                    userSession={userSession}
                    setUserSession={setUserSession}
                  />
                </WebSocketProvider>
*/

/*
const ReconnectingView = ({ isWebSocketReady }) => {
  return (
    <div
      style={{
        position: "fixed",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        backgroundColor: "rgba(0, 0, 0, 0.8)",
        display: isWebSocketReady ? "none" : "block",
        justifyContent: "center",
        alignItems: "center",
        zIndex: 9999,
      }}
    >
      <svg id="loading-reconnecting" className="loading" viewBox="0 0 1350 600">
        <text x="50%" y="50%" fill="transparent" textAnchor="middle">
          C O M P A N Y
        </text>
      </svg>
      <div
        style={{
          height: "100vh",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <span
          style={{
            marginTop: 80,
            fontWeight: "bold",
            fontSize: 24,
            letterSpacing: 2,
          }}
        >
          Connecting...
        </span>
      </div>
    </div>
  );
}; */

// TODO: Undo this
/*
<text x="50%" y="50%" fill="transparent" textAnchor="middle">
  J A N N E X
</text>
*/