import { Flex, View, Text, Icon } from "@aws-amplify/ui-react";
import { useRouter } from "next/router";
import { Lesson } from "../../models";
import { PlayIcon } from "../../ui-components";
import Link from "next/link";
import styles from "./LessonTableOfContents.module.scss";
// Maybe create a "Course" layout so that the table of contents can always be there?
export function LessonTableOfContents({
lessons,
currentLesson,
}: {
lessons: Lesson[];
currentLesson?: string;
}) {
const router = useRouter();
// Helper function to create the table of contents
function createLessonTOC() {
let chapter = 0;
// Create a closure so we have access to the "chapter" variable
function closure(lesson: Lesson) {
let result = [];
if (chapter !== lesson.chapter) {
// Found a new chapter so create the HTML for the chapter heading
chapter = lesson.chapter as number;
result.push(
{`CHAPTER ${chapter}`}
);
}
const pathname =
router.pathname.indexOf("lessons") > -1
? router.pathname
: `${router.pathname}/lessons/[lesson]`;
result.push(
{Number(currentLesson) === lesson.lessonNumber ? (
) : (
)}
{lesson.title}
);
return result;
}
return closure;
}
if (lessons.length > 0) {
return (
{lessons.map(createLessonTOC())}
);
}
return <>;
}