import type { Component } from "solid-js";
import { Show, createMemo, createResource } from "solid-js";
import DashboardShell from "../../../../components/dashboard/shared/dashboard-shell";
import DashboardTeacherClassrooms from "../../../../components/dashboard/teacher/dashboard-teacher-classrooms";
import { getTeacherDashboardHomeData } from "../../../../components/dashboard/teacher/dashboard-teacher-home.data";
import { useAuth } from "~/context/auth/context";

const TeacherDashboardClassroomsPage: Component = () => {
	const auth = useAuth();
	const teacherId = createMemo(() => (auth.isReady() && auth.user()?.role === "teacher" ? auth.user()!.id : null));
	const [teacherData] = createResource(teacherId, getTeacherDashboardHomeData);
	const shellData = createMemo(() => teacherData()?.shell);

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

export default TeacherDashboardClassroomsPage;
