FPSMS-frontend/src/components/InventorySearch/InventoryLotLineTable.tsx

import { InventoryLotLineResult, InventoryResult } from "@/app/api/inventory";
import { Dispatch, SetStateAction, useCallback, useMemo } from "react";
import { useTranslation } from "react-i18next";
import { Column } from "../SearchResults";
import SearchResults, { defaultPagingController, defaultSetPagingController } from "../SearchResults/SearchResults";
import { CheckCircleOutline, DoDisturb, EditNote } from "@mui/icons-material";
import { arrayToDateString } from "@/app/utils/formatUtil";
import { Typography } from "@mui/material";
import { isFinite } from "lodash";
import useUploadContext from "../UploadProvider/useUploadContext";
import { downloadFile } from "@/app/utils/commonUtil";
import { fetchQrCodeByLotLineId, LotLineToQrcode } from "@/app/api/pdf/actions";
import QrCodeIcon from "@mui/icons-material/QrCode";

interface Props {
    inventoryLotLines: InventoryLotLineResult[] | null;
    setPagingController: defaultSetPagingController;
    pagingController: typeof defaultPagingController;
    totalCount: number;
    item: InventoryResult | null;
}

const InventoryLotLineTable: React.FC<Props> = ({ inventoryLotLines, pagingController, setPagingController, totalCount, item }) => {
    const { t } = useTranslation(["inventory"]);
    const { setIsUploading } = useUploadContext();

    const printQrcode = useCallback(async (lotLineId: number) => {
      setIsUploading(true);
      // const postData = { stockInLineIds: [42,43,44] };
      const postData: LotLineToQrcode = {
        inventoryLotLineId: lotLineId
      }
      const response = await fetchQrCodeByLotLineId(postData);
      if (response) {
        console.log(response);
        downloadFile(new Uint8Array(response.blobValue), response.filename!);
      }
      setIsUploading(false);
    }, [setIsUploading]);
    
    const onDetailClick = useCallback(
      (lotLine: InventoryLotLineResult) => {
        console.log(lotLine)
        printQrcode(lotLine.id)
        // lot line id to find stock in line
      },
      [printQrcode],
    );
    const columns = useMemo<Column<InventoryLotLineResult>[]>(
        () => [
            // {
            //     name: "item",
            //     label: t("Code"),
            //     renderCell: (params) => {
            //         return params.item.code;
            //     },
            // },
            // {
            //     name: "item",
            //     label: t("Name"),
            //     renderCell: (params) => {
            //         return params.item.name;
            //     },
            // },
            {
                name: "lotNo",
                label: t("Lot No"),
            },
            // {
            //     name: "item",
            //     label: t("Type"),
            //     renderCell: (params) => {
            //         return t(params.item.type);
            //     },
            // },
            {
                name: "availableQty",
                label: t("Available Qty"),
                align: "right",
                headerAlign: "right",
                type: "integer",
            },
            {
                name: "uom",
                label: t("Sales UoM"),
                align: "left",
                headerAlign: "left",
            },
            {
                name: "qtyPerSmallestUnit",
                label: t("Available Qty Per Smallest Unit"),
                align: "right",
                headerAlign: "right",
                type: "integer",
            },
            {
                name: "baseUom",
                label: t("Base UoM"),
                align: "left",
                headerAlign: "left",
            },
            {
                name: "expiryDate",
                label: t("Expiry Date"),
                renderCell: (params) => {
                    return arrayToDateString(params.expiryDate)
                },
            },
            {
                name: "id",
                label: t("qrcode"),
                onClick: onDetailClick,
                buttonIcon: <QrCodeIcon />,
            },
            // {
            //     name: "status",
            //     label: t("Status"),
            //     type: "icon",
            //     icons: {
            //         available: <CheckCircleOutline fontSize="small"/>,
            //         unavailable: <DoDisturb fontSize="small"/>,
            //     },
            //     colors: {
            //         available: "success",
            //         unavailable: "error",
            //     }
            // },
        ],
        [t],
    );
    return <>
    <Typography variant="h6">{item ? `${t("Item selected")}: ${item.itemCode} | ${item.itemName} (${t(item.itemType)})` : t("No items are selected yet.")}</Typography>
    <SearchResults<InventoryLotLineResult>
        items={inventoryLotLines ?? []}
        columns={columns}
        pagingController={pagingController}
        setPagingController={setPagingController}
        totalCount={totalCount}
    />
    </>
}

export default InventoryLotLineTable;