import { useSuspenseQuery } from "@tanstack/react-query";
import * as Device from "expo-device";
import { Link } from "expo-router";
import {
	Button,
	ScrollView,
	Text,
	useWindowDimensions,
	View,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import Toast from "react-native-toast-message";

import { Card, CardContent } from "../../components/ui/card";
import { getActiveLoadingOrders } from "../../lib/queryStuff/getActiveLoadingOrders";
import { getDocks } from "../../lib/queryStuff/getDocks";

export default function DockScan() {
	const { data } = useSuspenseQuery(getDocks());
	const {
		data: loadingOrders,
		refetch,
		isLoading,
	} = useSuspenseQuery(getActiveLoadingOrders());
	const { width } = useWindowDimensions();
	const isTablet =
		Device.modelName?.toLowerCase().includes("et40") ||
		Device.modelName?.toLowerCase().includes("et45");

	const columns = isTablet ? 3 : 1;

	const gap = 8;
	const cardWidth =
		columns === 1 ? width - 16 : (width - gap * (columns + 1)) / columns;

	const updateLoadingOrders = () => {
		refetch();
		Toast.show({
			type: "success",
			text1: `Refreshing Loading Orders`,
		});
	};

	if (isLoading)
		return (
			<SafeAreaView>
				<Text>Loading...</Text>
			</SafeAreaView>
		);
	return (
		<View className="flex">
			<View
				style={{
					// flex: 1,
					//justifyContent: "center",
					alignItems: "center",
					marginTop: 50,
				}}
			>
				<Text className="text-2xl text-bold">Dock Scanning</Text>
				<Button title="Update Loading Orders" onPress={updateLoadingOrders} />
			</View>
			<View>
				<SafeAreaView className="flex">
					<ScrollView className="w-full">
						<View className="w-full flex-row flex-wrap gap-2 m-2">
							{data.map((i: any) => {
								const loadingPlan =
									i.currentLoadingOrder !== ""
										? loadingOrders.filter(
												(x: any) => x.id === Number(i.currentLoadingOrder),
											)
										: [];

								return (
									<View key={i.id}>
										<Link
											href={{
												pathname: "/dock/[id]",
												params: {
													id: i.dockId.toString(),
													currentLoading: i.currentLoadingOrder,
												},
											}}
										>
											<Card
												style={{
													borderWidth: 4,
													width: cardWidth,
												}}
											>
												<CardContent>
													<Text>{i.name}</Text>
													{i.currentLoadingOrder === "" ? (
														<Text>Tap to active new loading order</Text>
													) : (
														<View>
															<Text>
																Current Loading order : {i.currentLoadingOrder}
															</Text>
															{loadingPlan && loadingPlan.length > 0 && (
																<View>
																	<Text>
																		{`${loadingPlan[0].loadingPlanItems[0].articleId} - ${loadingPlan[0].loadingPlanItems[0].articleDescription}`}
																	</Text>
																	<Text>
																		Current Loaded :{" "}
																		{
																			loadingPlan[0].loadingPlanItems[0]
																				.loadedQuantityLUs
																		}{" "}
																		/{" "}
																		{
																			loadingPlan[0].loadingPlanItems[0]
																				.plannedQuantityLUs
																		}
																	</Text>
																</View>
															)}
														</View>
													)}
												</CardContent>
											</Card>
										</Link>
									</View>
								);
							})}
						</View>
					</ScrollView>
				</SafeAreaView>
			</View>
		</View>
	);
}
