import { useSuspenseQuery } from "@tanstack/react-query";
import { useLocalSearchParams, useRouter } from "expo-router";
import { Pressable, Text, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { Card } from "../../../components/ui/card";
import { useSocketRoom } from "../../../hooks/socket.io.hook";
import { getActiveLoadingOrders } from "../../../lib/queryStuff/getActiveLoadingOrders";

export default function DockPage() {
	const { scanner } = useLocalSearchParams<{
		scanner: string;
	}>();
	const { data: loadingOrders, isLoading } = useSuspenseQuery(
		getActiveLoadingOrders(),
	);
	const { data } = useSocketRoom<any>(
		`dockDoorLoading:${scanner}`,
		undefined,
		"append",
	) as any;
	const dockFilter = loadingOrders.filter(
		(i: any) => i.dockId === Number(scanner),
	);
	const router = useRouter();

	if (isLoading)
		return (
			<SafeAreaView>
				<Text>Loading...</Text>
			</SafeAreaView>
		);
	return (
		<SafeAreaView className="w-full">
			<View className="flex flex-row justify-between gap-1 ml-1 mr-1">
				<View>
					<Pressable
						onPress={() => router.back()}
						className="self-start rounded-xl bg-gray-200 px-4 py-2"
					>
						<Text className="font-semibold">← Back</Text>
					</Pressable>
				</View>

				<Text className="text-xl mt-1">{dockFilter[0].dockDescription}</Text>
				<View>
					<Pressable
						onPress={() =>
							router.replace({
								pathname: "/(tabs)/dockScan",
							})
						}
						className="self-start rounded-xl bg-gray-200 px-4 py-2"
					>
						<Text className="font-semibold">Docks</Text>
					</Pressable>
				</View>
				<View>
					{data.map((i: any, index: any) => {
						return (
							<View key={index} className="m-2">
								<Card>
									<Text>{JSON.stringify(i)}</Text>
								</Card>
							</View>
						);
					})}
				</View>
			</View>
		</SafeAreaView>
	);
}