import Menu from "@/components/menu";
import { useAppContext } from "@/providers/AuthProvider";
import { FunctionComponent } from "preact";
import { lazy, Route, Router, useLocation } from "preact-iso";
import ids from "./profile.module.scss";

const ProfilePage: FunctionComponent = () => {
  const { route } = useLocation();
  const { isLoggedIn, isCheckingAuth } = useAppContext(); // Получаем новый сигнал

  if (isCheckingAuth.value) {
    return <div class="flex h-screen items-center justify-center">Проверка авторизации...</div>;
  }

  if (!isLoggedIn.value) {
    route("/login", true);
    return <p>Redirecting...</p>; // Заглушка на время редиректа
  }
  return isLoggedIn.value ? (
    <div id={ids.main_container}>
      <div id={ids.router_container}>
        <Router>
          <Route path="/settings" component={lazy(() => import("./profile_settings"))} />
          <Route path="/tasks" component={lazy(() => import("./profile_tasks"))} />
          <Route path="/calendar" component={lazy(() => import("./profile_calendar"))} />
          <Route
            default
            component={() => {
              route("/profile/tasks", true);
              return null;
            }}
          />
        </Router>
      </div>
      <div id={ids.menu_container}>
        <Menu />
      </div>
    </div>
  ) : (
    <p>Redirecting...</p>
  );
};

export default ProfilePage;