import { useQuery } from "@tanstack/react-query";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Skeleton } from "@/components/ui/skeleton";
import {
	Table,
	TableBody,
	TableCell,
	TableHead,
	TableHeader,
	TableRow,
} from "@/components/ui/table";
import { getPrinters } from "../../-utils/querys/ocp/printers";
import { LstCard } from "../extendedUi/LstCard";

let printerCols = [
	{
		key: "printer",
		label: "Printer",
	},
	{
		key: "statusMessage",
		label: "Status Message",
	},
];
export default function PrinterStatus() {
	const { data, isError, isLoading } = useQuery(getPrinters());

	if (isError) {
		return (
			<ScrollArea className="h-[400px]">
				<p className="text-center">Printer Staus error</p>

				<Table>
					<TableHeader>
						<TableRow>
							{printerCols.map((l) => (
								<TableHead key={l.key}>{l.label}</TableHead>
							))}
						</TableRow>
					</TableHeader>

					<TableBody>
						{Array(5)
							.fill(0)
							.map((_, i) => (
								<TableRow key={i}>
									<TableCell className="font-medium">
										<Skeleton className="h-4" />
									</TableCell>
									<TableCell>
										<Skeleton className="h-4" />
									</TableCell>
								</TableRow>
							))}
					</TableBody>
				</Table>
			</ScrollArea>
		);
	}

	/**
	 * only show the assigned printers
	 */

	const assigned = data?.filter((a: any) => a.assigned) || [];
	return (
		<LstCard className="m-2 p-2">
			<ScrollArea className="max-h-[800px]">
				<p className="text-center">
					{isLoading ? (
						<span>Printers status loading...</span>
					) : (
						<span>Printer Status</span>
					)}
				</p>

				<Table>
					<TableHeader>
						<TableRow>
							{printerCols.map((l) => (
								<TableHead key={l.key}>{l.label}</TableHead>
							))}
						</TableRow>
					</TableHeader>
					{isLoading ? (
						<TableBody>
							{Array(5)
								.fill(0)
								.map((_, i) => (
									<TableRow key={i}>
										<TableCell className="font-medium">
											<Skeleton className="h-4" />
										</TableCell>
										<TableCell>
											<Skeleton className="h-4" />
										</TableCell>
									</TableRow>
								))}
						</TableBody>
					) : (
						<TableBody>
							{assigned?.map((p: any) => (
								<TableRow key={p.printer_id}>
									<TableCell>{p.name}</TableCell>
									<TableCell>{p.statusText}</TableCell>
								</TableRow>
							))}
						</TableBody>
					)}
				</Table>
			</ScrollArea>
		</LstCard>
	);
}
