import type { Component } from "solid-js";
import { Show, createMemo, createResource } from "solid-js";
import DashboardSettingsFocus from "../../../components/dashboard/settings/dashboard-settings-focus";
import DashboardShell from "../../../components/dashboard/shared/dashboard-shell";
import { getDashboardHomeData } from "../../../components/dashboard/student/dashboard-home.data";
import { useAuth } from "~/context/auth/context";

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

	return (
		<DashboardShell sidebarData={shellData()?.shell} topbarData={shellData()?.shell}>
			<Show when={auth.isReady()} fallback={<section>Loading your dashboard session…</section>}>
				<Show when={auth.user()?.role === "student"} fallback={<section>This settings view is for student accounts.</section>}>
					<DashboardSettingsFocus />
				</Show>
			</Show>
		</DashboardShell>
	);
};

export default StudentDashboardSettingsRoute;
