import { useQuery } from "@tanstack/react-query";
import axios from "axios";
import { format } from "date-fns";
import { Trash } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
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 { getOcmeInfo } from "../../-utils/querys/ocp/getOcmeInfo";
import { LstCard } from "../extendedUi/LstCard";
import ManualTrigger from "../rfid/ManualTrigger";

const currentPallets = [
	{ key: "line", label: "Line" },
	{ key: "runningNumber", label: "Running #" },
	{ key: "upd_date", label: "Date Scanned" },
	{ key: "waitingfor", label: "Waiting For" },
	{ key: "clear", label: "Clear" },
];

// const currentTags = [
//     { key: "line", label: "Line" },
//     { key: "printerName", label: "Printer" },
//     { key: "runningNr", label: "Running #" },
//     { key: "upd_date", label: "Label date" },
//     { key: "status", label: "Label Status" },
// ];
export default function WrapperManualTrigger() {
	const { data, isError, isLoading } = useQuery(getOcmeInfo());
	const cameraTrigger = async () => {
		try {
			const res = await axios.get("/ocme/api/v1/manualCameraTrigger");

			if (res.data.success) {
				toast.success(res.data.message);
				return;
			}

			if (!res.data.success) {
				toast.error(res.data.message);
			}
		} catch (error) {
			console.log(error);
			//stoast.success(error.data.message);
		}
	};

	const clearLabel = async (d: any) => {
		const data = {
			runningNr: d.runningNr,
		};

		try {
			const res = await axios.patch("/ocme/api/v1/pickedUp", data);

			if (res.data.success) {
				toast.success(`${d.runningNr} was just removed from being picked up.`);
				return;
			}

			if (!res.data.success) {
				toast.error(res.data.message);
			}
		} catch (error) {
			console.log(error);
			//stoast.success(error.data.message);
		}
	};

	if (isError) {
		return (
			<div>
				<p className="text-center  text-pretty">
					There was an error getting wrapper scans
				</p>
			</div>
		);
	}

	const info = data?.filter((r: any) => r.areaFrom === "wrapper_1");
	return (
		<LstCard className="m-2 p-2 w-auto">
			<ScrollArea className="max-h-[200px]">
				<span>Wrapper Pallet Info</span>
				<div>
					<Table>
						<TableHeader>
							<TableRow>
								{currentPallets.map((l) => (
									<TableHead key={l.key}>{l.label}</TableHead>
								))}
							</TableRow>
						</TableHeader>
						{isLoading ? (
							<TableBody>
								{Array(3)
									.fill(0)
									.map((_, i) => (
										<TableRow key={i}>
											<TableCell className="font-medium">
												<Skeleton className="h-4" />
											</TableCell>
											<TableCell>
												<Skeleton className="h-4" />
											</TableCell>
											<TableCell>
												<Skeleton className="h-4" />
											</TableCell>
											<TableCell>
												<Skeleton className="h-4" />
											</TableCell>
											<TableCell>
												<Skeleton className="h-4" />
											</TableCell>
										</TableRow>
									))}
							</TableBody>
						) : (
							<TableBody>
								{info.map((i: any) => (
									<TableRow key={i.runningNr}>
										<TableCell className="font-medium">{i.lineNum}</TableCell>
										<TableCell>{i.runningNr}</TableCell>
										<TableCell>
											{format(i?.upd_date.replace("Z", ""), "M/d/yyyy hh:mm")}
										</TableCell>
										<TableCell>{i.waitingFor}</TableCell>
										<TableCell>
											<Button
												variant="destructive"
												size="icon"
												onClick={() => clearLabel(i)}
											>
												<Trash />
											</Button>
										</TableCell>
									</TableRow>
								))}
							</TableBody>
						)}
					</Table>
				</div>
			</ScrollArea>

			<div>
				<hr />
				{/* <p className="text-center mb-3">Manual Trigger</p>
                <ManuallyEnterRn />
                <Separator className="m-1" /> */}
				<div className="flex flex-row justify-between m-2">
					<Button onClick={cameraTrigger}>Camera</Button>
					<ManualTrigger />
				</div>
			</div>
		</LstCard>
	);
}
