import { q } from "@thorium/context/AppContext";
import useEventListener, {
	ShipMapDeckSelectEvent,
	ShipMapRoomSelectEvent,
} from "@thorium/hooks/useEventListener";
import { useStation } from "@thorium/routes/station/useStation";
import { SVGImageLoader } from "@thorium/ui/SVGImageLoader";
import { cn } from "@thorium/utils/cn";
import { useCallback, useRef, type ReactNode, type RefObject } from "react";
import { Suspense } from "react";

import { useShipMapStore } from "./useShipMapStore";

type DeckChildren = (
	deck: { name: string },
	deckIndex: number,
	ref: RefObject<HTMLDivElement | null>,
) => ReactNode;

export function ShipView({
	deckIndex,
	deckChildren,
}: {
	deckIndex: number;
	cardLoaded: boolean;
	deckChildren?: DeckChildren;
}) {
	const { shipId } = useStation();
	const [cargoRooms] = q.cargoControl.rooms.useNetRequest({ shipId });

	const { decks } = cargoRooms;

	useEventListener(ShipMapDeckSelectEvent.name, (event: ShipMapDeckSelectEvent) => {
		useShipMapStore.setState({ deckIndex: event.deckIndex });
	});
	useEventListener(ShipMapRoomSelectEvent.name, (event: ShipMapRoomSelectEvent) => {
		useShipMapStore.setState({ selectedRoomId: event.roomId });
	});

	return (
		<div id="deck-container" className="relative h-full w-full justify-self-center select-none">
			<Suspense fallback={null}>
				{decks.map((d, i) => (
					<Deck key={d.name} d={d} i={i} deckIndex={deckIndex} deckChildren={deckChildren} />
				))}
			</Suspense>
		</div>
	);
}

function Deck({
	d,
	i,
	deckIndex,
	deckChildren,
}: {
	d: { name: string; backgroundUrl?: string };
	i: number;
	deckIndex: number;
	deckChildren?: DeckChildren;
}) {
	const ref = useRef<HTMLDivElement>(null);

	const onClick = useCallback(() => useShipMapStore.setState({ selectedRoomId: null }), []);
	return (
		<div
			id={d.name}
			className="pointer-events-none absolute w-full origin-top"
			style={{
				transition: "opacity 0.2s ease",
			}}
		>
			<div
				className={cn(`relative transition-all duration-500`, {
					"deck-on": deckIndex === i,
					"deck-before": deckIndex < i,
					"deck-after": deckIndex > i,
				})}
			>
				{deckChildren?.(d, i, ref)}

				<SVGImageLoader
					url={d.backgroundUrl || ""}
					onClick={onClick}
					className="pointer-events-none outline-none"
					ref={ref}
				/>
			</div>
		</div>
	);
}