import { LstCard } from "@/components/extendedUI/LstCard";
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/production/printers";
import { useQuery } from "@tanstack/react-query";

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>
    );
}