import { motion } from "framer-motion";
import { useContext, useState } from "react";
import { CourseDetailContext } from "./CourseDetailContext";
import { CourseSyllabus } from "./CourseSyllabus";
import { CourseDetailContent } from "./CourseDetailContent";
import CourseVideoPage from "./CourseVideoPage";

export default function CourseDetailLayout() {
	const { course, selectedLectureId, isLoading, setSelectedLectureId } =
		useContext(CourseDetailContext);

	const handleLectureClick = (lectureId: string) => {
		setSelectedLectureId(lectureId);
	};
	const [isSyllabusOpen, setIsSyllabusOpen] = useState(false);
	return (
		<div className="relative">
			{/* 主内容区域 */}
			<motion.div
				animate={{
					width: isSyllabusOpen ? "66.666667%" : "100%",
				}}
				transition={{ type: "spring", stiffness: 300, damping: 30 }}
				className="relative">
				<CourseVideoPage
					course={course}
					isLoading={isLoading}
					videoSrc="https://flipfit-cdn.akamaized.net/flip_hls/664ce52bd6fcda001911a88c-8f1c4d/video_h1.m3u8"
					videoPoster="https://picsum.photos/800/450"
				/>
			</motion.div>

			{/* 课程大纲侧边栏 */}
			<CourseSyllabus
				sections={course?.sections || []}
				onLectureClick={handleLectureClick}
				isOpen={isSyllabusOpen}
				onToggle={() => setIsSyllabusOpen(!isSyllabusOpen)}
			/>
		</div>
	);
}
