import { useContext } from "react";
import { VideoPlayerContext } from "../VideoPlayer";
import { AnimatePresence, motion } from "framer-motion";
import { Cog6ToothIcon } from "@heroicons/react/24/solid";

export default function Setting() {
	const {
		isSettingsOpen,
		setIsSettingsOpen,
		resolution,
		setResolution,
		resolutions,
	} = useContext(VideoPlayerContext);

	return (
		<>
			<div className="relative flex items-center">
				<button
					onClick={() => setIsSettingsOpen(!isSettingsOpen)}
					className="text-white hover:text-primaryHover">
					<Cog6ToothIcon className="w-10 h-10" />
				</button>

				<AnimatePresence>
					{isSettingsOpen && (
						<motion.div
							initial={{ opacity: 0, y: 10 }}
							animate={{ opacity: 1, y: 0 }}
							exit={{ opacity: 0, y: 10 }}
							className="absolute right-0 bottom-full mb-2 bg-black/90 rounded-lg p-4 min-w-[200px]">
							{/* 清晰度选择器 */}
							<div className="flex flex-col gap-2">
								<div className="text-white text-sm mb-2">
									清晰度
								</div>
								{resolutions.map((res) => (
									<button
										key={res.id}
										onClick={() => {
											setResolution(res.id);
											setIsSettingsOpen(false); // 选择后关闭菜单
										}}
										className={`
                        w-full text-left px-3 py-2 rounded
                        ${
							resolution === res.id
								? "bg-primary text-white"
								: "text-white/90 hover:bg-white/20"
						}
                        transition-colors duration-200
                      `}>
										{res.label || `${res.height}p`}
									</button>
								))}
							</div>
						</motion.div>
					)}
				</AnimatePresence>
			</div>
		</>
	);
}