roblox/components/site/OutfitQuickChooser.tsx

"use client";

import { useAvatarOutfits } from "@/hooks/roblox/useAvatarOutfits";
import { Button } from "@/components/ui/button";
import LazyLoadedImage from "../util/LazyLoadedImage";
import { StupidHoverThing } from "../util/MiscStuff";
import { loadThumbnails } from "@/lib/thumbnailLoader";
import { useCurrentAccount } from "@/hooks/roblox/useCurrentAccount";
import { useEffect } from "react";
import { X } from "lucide-react";

type OutfitSelectorProps = {
	setVisible: (visible: boolean) => void;
	updateOutfit: (
		outfit: { id: number },
		acc: { id: number }
	) => Promise<void>;
};

export function OutfitSelector({
	setVisible,
	updateOutfit
}: OutfitSelectorProps) {
	const outfits = useAvatarOutfits();
	const acc = useCurrentAccount();

	useEffect(() => {
		if (!outfits || outfits.length === 0) return;
		loadThumbnails(
			outfits.map((a) => ({
				type: "Outfit",
				targetId: a.id,
				format: "webp",
				size: "420x420"
			}))
		).catch(() => {});
	}, [outfits]);

	useEffect(() => {
		const handleKeyDown = (event: KeyboardEvent) => {
			if (event.key === "Escape") setVisible(false);
		};
		window.addEventListener("keydown", handleKeyDown);
		return () => window.removeEventListener("keydown", handleKeyDown);
	}, [setVisible]);

	const isLoading = outfits === null;
	const hasOutfits = Array.isArray(outfits) && outfits.length > 0;

	return (
		<div
			className="fixed inset-0 z-40 flex items-center justify-center bg-mantle/70 backdrop-blur-sm"
			onClick={() => setVisible(false)}
		>
			<div
				className="relative w-full max-w-3xl sm:max-w-4xl mx-4 rounded-2xl bg-crust/95 ring-1 ring-surface0/60 shadow-2xl"
				onClick={(event) => event.stopPropagation()}
			>
				<div className="flex items-center justify-between border-b border-surface0/60 px-6 py-4">
					<div>
						<p className="text-lg font-semibold text-text">Outfits</p>
						<p className="text-xs text-subtext1">
							Pick a look to update your avatar instantly.
						</p>
					</div>
					<Button
						variant="ghost"
						size="icon"
						onClick={() => setVisible(false)}
						aria-label="Close outfit chooser"
					>
						<X className="h-4 w-4" />
					</Button>
				</div>

				<div className="p-6">
					{!acc ? (
						<div className="rounded-xl border border-surface0/60 bg-base/50 p-6 text-sm text-subtext1">
							Sign in to load your outfits.
						</div>
					) : isLoading ? (
						<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
							{Array.from({ length: 8 }).map((_, index) => (
								<div
									key={`outfit-skeleton-${index}`}
									className="rounded-xl border border-surface0/60 bg-base/40 p-3"
								>
									<div className="h-24 w-24 sm:h-28 sm:w-28 rounded-lg bg-surface0/70 animate-pulse" />
									<div className="mt-3 h-3 w-20 rounded bg-surface0/70 animate-pulse" />
								</div>
							))}
						</div>
					) : hasOutfits ? (
						<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 max-h-[60vh] overflow-y-auto pr-2">
							{outfits.map((outfit: { id: number; name: string }) => (
								<StupidHoverThing
									key={outfit.id}
									delayDuration={0}
									text={outfit.name}
								>
									<button
										className="group rounded-xl border border-surface0/50 bg-base/40 p-3 text-left transition hover:-translate-y-0.5 hover:border-surface1/80 hover:bg-surface0/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue/60"
										onClick={async () => {
											await updateOutfit(outfit, acc);
											setVisible(false);
										}}
										aria-label={`Wear ${outfit.name}`}
									>
										<LazyLoadedImage
											imgId={`Outfit_${outfit.id}`}
											alt={outfit.name}
											className="h-24 w-24 sm:h-28 sm:w-28 rounded-lg object-cover shadow-sm"
											size="420x420"
											lazyFetch={false}
										/>
										<p className="mt-3 text-xs font-medium text-text line-clamp-2">
											{outfit.name}
										</p>
									</button>
								</StupidHoverThing>
							))}
						</div>
					) : (
						<div className="rounded-xl border border-surface0/60 bg-base/50 p-6 text-sm text-subtext1">
							No outfits found yet. Make one in the Roblox avatar editor,
							then come back here.
						</div>
					)}
				</div>
			</div>
		</div>
	);
}