import axios from "axios";
import { LstCard } from "../extendedUI/LstCard";
import { Button } from "../ui/button";
import { ScrollArea } from "../ui/scroll-area";
import { Skeleton } from "../ui/skeleton";
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "../ui/table";
import { toast } from "sonner";
import { getOcmeInfo } from "@/utils/querys/production/getOcmeInfo";
import { useQuery } from "@tanstack/react-query";
import { format } from "date-fns";
import { Trash } from "lucide-react";
import ManualTrigger from "../logistics/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>
    );
}