//import { LstCard } from "@/components/extendedUI/LstCard";

import { useQuery } from "@tanstack/react-query";
import { createColumnHelper } from "@tanstack/react-table";
import { ArrowDown, ArrowUp } from "lucide-react";
import { Button } from "@/components/ui/button";
import { CardHeader } from "@/components/ui/card";
import TableNoExpand from "@/lib/tableStuff/TableNoExpand";
import { LstCard } from "../../-components/extendedUi/LstCard";
import { getPallets } from "../../-utils/querys/quality/getPallets";

//import { CircleX } from "lucide-react";
//import { Suspense } from "react";
//import { toast } from "sonner";

type Pallets = {
	article: string;
	runningNr: string;
	warehouseAtRequest: string;
	locationAtRequest: string;
	locationDropOff: string;
};

export default function PPOO() {
	//{ style = {} }
	const { data, isError, isLoading } = useQuery(getPallets());
	const columnHelper = createColumnHelper<Pallets>();

	if (isLoading) return <div>Loading pallet data...</div>;
	if (isError) {
		return (
			<div>
				<p>There was an error getting the pallets.</p>
			</div>
		);
	}
	const monitoring = [1, 4, 6, 7];
	const filteredData = data.filter((n: any) =>
		monitoring.includes(n.palletStatus),
	);

	const columns = [
		columnHelper.accessor("article", {
			header: ({ column }) => {
				return (
					<Button
						variant="ghost"
						onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
						className="w-16 ml-1"
					>
						<span className="flex flex-row gap-2">Article</span>
						{column.getIsSorted() === "asc" ? (
							<ArrowUp className="ml-2 h-4 w-4" />
						) : (
							<ArrowDown className="ml-2 h-4 w-4" />
						)}
					</Button>
				);
			},
		}),
		columnHelper.accessor("runningNr", {
			header: ({ column }) => {
				return (
					<Button
						variant="ghost"
						onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
						className="w-16 ml-1"
					>
						<span className="flex flex-row gap-2">Running Number</span>
						{column.getIsSorted() === "asc" ? (
							<ArrowUp className="ml-2 h-4 w-4" />
						) : (
							<ArrowDown className="ml-2 h-4 w-4" />
						)}
					</Button>
				);
			},
		}),
		columnHelper.accessor("locationAtRequest", {
			header: ({ column }) => {
				return (
					<Button
						variant="ghost"
						onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
						className="w-16 ml-1"
					>
						<span className="flex flex-row gap-2">Location</span>
						{column.getIsSorted() === "asc" ? (
							<ArrowUp className="ml-2 h-4 w-4" />
						) : (
							<ArrowDown className="ml-2 h-4 w-4" />
						)}
					</Button>
				);
			},
		}),
		columnHelper.accessor("locationDropOff", {
			header: ({ column }) => {
				return (
					<Button
						variant="ghost"
						onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
						className="w-16 ml-1"
					>
						<span className="flex flex-row gap-1">Drop off at</span>
						{column.getIsSorted() === "asc" ? (
							<ArrowUp className="ml-2 h-4 w-4" />
						) : (
							<ArrowDown className="ml-2 h-4 w-4" />
						)}
					</Button>
				);
			},
		}),
	];

	return (
		<LstCard className="w-5/6">
			<CardHeader>
				Quality Request Card Total Pallets {filteredData.length}
			</CardHeader>
			<TableNoExpand data={filteredData} columns={columns} />
		</LstCard>
	);
}
