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

import { Skeleton } from "@/components/ui/skeleton";
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table";
// import {useSessionStore} from "@/lib/store/sessionStore";
// import {useSettingStore} from "@/lib/store/useSettings";
import { useQuery } from "@tanstack/react-query";
import { getlabels } from "@/utils/querys/production/labels";
import { format } from "date-fns";

const labelLogs = [
    { key: "line", label: "Line" },
    { key: "printerName", label: "Printer" },
    { key: "runningNr", label: "Running #" },
    { key: "upd_date", label: "Label date" },
    { key: "status", label: "Label Status" },
    //{key: "reprint", label: "Reprint"}, // removing the reprint button for now until repritning is working as intended
];
export default function LabelLog() {
    const { data, isError, isLoading } = useQuery(getlabels("4"));

    if (isError) {
        return (
            <div className="m-2 p-2 min-h-2/5">
                <LstCard>
                    <p className="text-center">Labels for the last 2 hours</p>

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

                        <TableBody>
                            {Array(7)
                                .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>
                    </Table>
                </LstCard>
            </div>
        );
    }
    const labelData = data ? data : [];
    return (
        <LstCard className="m-2 p-2 min-h-2/5">
            <p className="text-center">
                {labelData.length === 0 ? (
                    <span>No labels have been printed in the last 2 hours</span>
                ) : (
                    <span>Labels for the last 2 hours</span>
                )}
            </p>
            <Table>
                <TableHeader>
                    <TableRow>
                        {labelLogs.map((l) => (
                            <TableHead key={l.key}>{l.label}</TableHead>
                        ))}
                    </TableRow>
                </TableHeader>
                {isLoading ? (
                    <>
                        <TableBody>
                            {Array(7)
                                .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>
                        {labelData.map((label: any) => (
                            <TableRow key={label.label_id}>
                                <TableCell className="font-medium">
                                    {label.line}
                                </TableCell>
                                <TableCell className="font-medium">
                                    {label.printerName}
                                </TableCell>
                                <TableCell className="font-medium">
                                    {label.runningNr}
                                </TableCell>
                                <TableCell className="font-medium">
                                    {format(
                                        label?.upd_date.replace("Z", ""),
                                        "M/d/yyyy hh:mm"
                                    )}
                                </TableCell>
                                <TableCell className="font-medium">
                                    {label.status}
                                </TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                )}

                {/* <TableFooter>
                    {labelData.length === 0 && (
                        <div className="flex justify-center">
                            <h2 className="text-center text-2xl">
                                No labels have been printed in the last 2 hours
                            </h2>
                        </div>
                    )}
                </TableFooter> */}
            </Table>
        </LstCard>
    );
}