import { A, useParams } from "@solidjs/router";
import type { Component } from "solid-js";
import { createMemo } from "solid-js";
import AssignmentHeader from "../../../components/assignment/assignment-header";
import AssignmentOverview from "../../../components/assignment/assignment-overview";
import AssignmentQuestionList from "../../../components/assignment/assignment-question-list";
import AssignmentTabs from "../../../components/assignment/assignment-tabs";
import { getAssignmentPageData } from "../../../components/assignment/assignment.data";
import styles from "../assignment-page.module.scss";

const AssignmentPage: Component = () => {
	const params = useParams();
	const assignmentData = createMemo(() => getAssignmentPageData(Number(params.id)));

	return (
		<main class={styles.page}>
			<div class={styles.shell}>
				{assignmentData() ? (
					<>
						<AssignmentHeader data={assignmentData()!} />
						<AssignmentTabs />

						<div class={styles.contentGrid}>
							<div class={styles.mainColumn}>
								<AssignmentQuestionList data={assignmentData()!} />
							</div>

							<aside class={styles.sideColumn}>
								<AssignmentOverview data={assignmentData()!} />
							</aside>
						</div>
					</>
				) : (
					<section class={styles.emptyState}>
						<p class={styles.emptyEyebrow}>Assignment not found</p>
						<h1>We could not find that sample assignment.</h1>
						<p>Try one of the mock IDs like 3006 or 3007, or jump back to the dashboard.</p>
						<A href="/dashboard" class={styles.backButton}>
							Back to dashboard
						</A>
					</section>
				)}
			</div>
		</main>
	);
};

export default AssignmentPage;
