import { StrictMode } from "react";
import ReactDOM from "react-dom/client";

// ! This is horrible because we are manually checking if all components are loaded before rendering the app.
// TODO : After migrating to Vite, we should be able to import all components directly in this file and avoid this hacky approach.
const APP_COMPONENTS = [
  "AppRouter",
  "RootLayout",
  "RootError",
  "SocketProvider",
  "TopBarLoader",
  "AuthLayout",
  "AppLayout",
  "ChatLayout",
  "LoginRoute",
  "RegisterRoute",
  "ForgotPasswordRoute",
  "ResetPasswordRoute",
  "VerifyEmailRoute",
  "LoginForm",
  "RegisterForm",
  "ConversationsRoute",
  "ConversationRow",
  "EmptyConversations",
  "NewConversationModal",
  "ChatRoute",
  "ChatHeader",
  "MessageList",
  "MessagesSkeleton",
  "MessageInput",
  "MessageBubble",
  "RootLoading",
  "ProfileRoute",
  "RootNotFound",
  "FluxMark",
  "Avatar",
  "Field",
  "IconInput",
  "BottomNav",
  "BottomNavItem",
  "NavAvatar",
  "ProfileHeader",
  "ProfileIdentity",
  "ProfileStats",
  "SettingsGroup",
  "SettingsRow",
];

function areComponentsReady() {
  return APP_COMPONENTS.every((name) => window[name]);
}

function render() {
  const root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(
    <StrictMode>
      <AppRouter />
    </StrictMode>
  );
}

function init() {
  if (areComponentsReady()) {
    render();
    return;
  }

  requestAnimationFrame(init);
}

init();