import type { Component } from "solid-js";
import { Show, createMemo, createResource } from "solid-js";
import DashboardActivity from "../../../components/dashboard/student/dashboard-activity";
import DashboardCourses from "../../../components/dashboard/student/dashboard-courses";
import DashboardHero from "../../../components/dashboard/student/dashboard-hero";
import { getDashboardHomeData } from "../../../components/dashboard/student/dashboard-home.data";
import DashboardInsights from "../../../components/dashboard/student/dashboard-insights";
import DashboardInstructors from "../../../components/dashboard/student/dashboard-instructors";
import DashboardShell from "../../../components/dashboard/shared/dashboard-shell";
import { useAuth } from "~/context/auth/context";
import styles from "../dashboard.module.scss";

const StudentDashboardPage: Component = () => {
	const auth = useAuth();
	const studentId = createMemo(() => (auth.isReady() && auth.user()?.role === "student" ? auth.user()!.id : null));
	const [homeData] = createResource(studentId, getDashboardHomeData);
	const shellData = createMemo(() => homeData()?.shell);

	return (
		<DashboardShell sidebarData={shellData()} topbarData={shellData()}>
			<Show when={auth.isReady()} fallback={<section>Loading your dashboard session…</section>}>
				<Show when={auth.user()?.role === "student"} fallback={<section>This dashboard view is for student accounts.</section>}>
					<Show when={!homeData.error} fallback={<section>We could not load the live dashboard home right now.</section>}>
						<Show when={homeData()} keyed fallback={<section>Loading your live dashboard from the backend…</section>}>
							{(data) => (
								<>
									<DashboardHero {...data.hero} />

									<div class={styles.contentGrid}>
										<DashboardCourses assignmentCards={data.assignmentCards} />
										<DashboardActivity {...data.activity} />
										<DashboardInstructors studentSupportList={data.studentSupportList} />
									</div>

									<DashboardInsights {...data.insights} />
								</>
							)}
						</Show>
					</Show>
				</Show>
			</Show>
		</DashboardShell>
	);
};

export default StudentDashboardPage;
