FPSMS-frontend/src/components/PoDetail/PoQcStockInModal.tsx

"use client";

import {
  ModalFormInput,
  PurchaseQCInput,
  PurchaseQcResult,
  StockInInput,
  StockInLineEntry,
  updateStockInLine,
} from "@/app/api/po/actions";
import { Box, Button, Modal, ModalProps, Stack } from "@mui/material";
import {
  Dispatch,
  SetStateAction,
  useCallback,
  useContext,
  useEffect,
  useMemo,
  useState,
} from "react";
import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import QcForm from "./QcForm";
import { QcItemWithChecks } from "@/app/api/qc";
import { Check, CurrencyYuanRounded, TtyTwoTone } from "@mui/icons-material";
import { PurchaseOrderLine, StockInLine } from "@/app/api/po";
import { useSearchParams } from "next/navigation";
import { StockInLineRow } from "./PoInputGrid";
import EscalationForm from "./EscalationForm";
import StockInForm from "./StockInForm";
import PutawayForm from "./PutawayForm";
import {
  INPUT_DATE_FORMAT,
  stockInLineStatusMap,
} from "@/app/utils/formatUtil";
import dayjs from "dayjs";
import arraySupport from "dayjs/plugin/arraySupport";
import { downloadFile } from "@/app/utils/commonUtil";
import { fetchPoQrcode } from "@/app/api/pdf/actions";
import UploadContext from "../UploadProvider/UploadProvider";
import useUploadContext from "../UploadProvider/useUploadContext";

dayjs.extend(arraySupport);
interface CommonProps extends Omit<ModalProps, "children"> {
  // setRows: Dispatch<SetStateAction<PurchaseOrderLine[]>>;
  setEntries?: Dispatch<SetStateAction<StockInLineRow[]>>;
  setStockInLine?: Dispatch<SetStateAction<StockInLine[]>>;
  itemDetail: StockInLine & { qcResult?: PurchaseQcResult[] };
  setItemDetail: Dispatch<
    SetStateAction<
      | (StockInLine & {
          warehouseId?: number;
        })
      | undefined
    >
  >;
  qc?: QcItemWithChecks[];
  warehouse?: any[];
  type: "qc" | "stockIn" | "escalation" | "putaway";
}
interface QcProps extends CommonProps {
  qc: QcItemWithChecks[];
  type: "qc";
}
interface StockInProps extends CommonProps {
  // naming
  type: "stockIn";
}
interface PutawayProps extends CommonProps {
  warehouse: any[];
  type: "putaway";
}
interface EscalationProps extends CommonProps {
  // naming
  type: "escalation";
}

type Props = QcProps | StockInProps | PutawayProps | EscalationProps;
const style = {
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  bgcolor: "background.paper",
  pt: 5,
  px: 5,
  pb: 10,
  width: { xs: "80%", sm: "80%", md: "80%" },
};

const PoQcStockInModal: React.FC<Props> = ({
  type,
  // setRows,
  setEntries,
  setStockInLine,
  open,
  onClose,
  itemDetail,
  setItemDetail,
  qc,
  warehouse,
}) => {
  const { setIsUploading } = useUploadContext();

  const [serverError, setServerError] = useState("");
  const { t } = useTranslation();
  const params = useSearchParams();
  const [btnIsLoading, setBtnIsLoading] = useState(false);

  console.log(params.get("id"));
  console.log(itemDetail);
  console.log(itemDetail.qcResult);
  const formProps = useForm<ModalFormInput>({
    defaultValues: {
      ...itemDetail,
      // receiptDate: itemDetail.receiptDate || dayjs().add(-1, "month").format(INPUT_DATE_FORMAT),
      // warehouseId: itemDetail.defaultWarehouseId || 0
    },
  });
  // console.log(formProps);
  const errors = formProps.formState.errors;
  const closeHandler = useCallback<NonNullable<ModalProps["onClose"]>>(
    (...args) => {
      onClose?.(...args);
      //   reset();
    },
    [onClose]
  );

  useEffect(() => {
    // setDefaultValues({...itemDetail});
    if (!itemDetail) {
      console.log(itemDetail);
    }
  }, [itemDetail]);

  // const fix0IndexedDate = useCallback((date: string | number[] | undefined) => {
  //   if (Array.isArray(date)) {
  //     console.log(date);
  //     return dayjs([date[0], date[1] - 1, date[2]]).format("YYYY-MM-DD");
  //   }
  //   return date;
  // }, []);
  const checkStockIn = useCallback(
    (data: ModalFormInput): boolean => {
      let hasErrors = false;
      if (itemDetail.shelfLife && !data.productionDate && !data.expiryDate) {
        formProps.setError("productionDate", {
          message: "Please provide at least one",
          type: "invalid",
        });
        formProps.setError("expiryDate", {
          message: "Please provide at least one",
          type: "invalid",
        });
        hasErrors = true;
      }
      if (!itemDetail.shelfLife && !data.expiryDate) {
        formProps.setError("expiryDate", {
          message: "Please provide expiry date",
          type: "invalid",
        });
        hasErrors = true;
      }

      if (data.expiryDate && data.expiryDate < data.receiptDate!!) {
        formProps.setError("expiryDate", {
          message: "Expired",
          type: "invalid",
        });
        hasErrors = true;
      }
      return hasErrors;
    },
    [itemDetail, formProps]
  );

  const checkPutaway = useCallback(
    (data: ModalFormInput): boolean => {
      let hasErrors = false;
      console.log(data.warehouseId);
      if (!data.warehouseId || data.warehouseId <= 0) {
        formProps.setError("warehouseId", {
          message: "Please provide warehouseId",
          type: "invalid",
        });
        hasErrors = true;
      }
      return hasErrors;
    },
    [itemDetail, formProps]
  );

  const onSubmit = useCallback<SubmitHandler<ModalFormInput & {}>>(
    async (data, event) => {
      setBtnIsLoading(true);
      setIsUploading(true)
      formProps.clearErrors();
      let hasErrors = false;
      console.log(errors);
      console.log(data);
      console.log(itemDetail);
      // console.log(fix0IndexedDate(data.receiptDate));
      try {
        // add checking
        if (type === "stockIn") {
          hasErrors = checkStockIn(data)
          console.log(hasErrors)
        }
        if (type === "putaway") {
          hasErrors = checkPutaway(data);
          console.log(hasErrors)
        }
        //////////////////////// modify this mess later //////////////////////
        var productionDate = null;
        var expiryDate = null;
        var receiptDate = null;
        var acceptedQty = null;
        if (data.productionDate) {
          productionDate = dayjs(data.productionDate).format(INPUT_DATE_FORMAT);
        }
        if (data.expiryDate) {
          expiryDate = dayjs(data.expiryDate).format(INPUT_DATE_FORMAT);
        }
        if (data.receiptDate) {
          receiptDate = dayjs(data.receiptDate).format(INPUT_DATE_FORMAT);
        }
        // if ()
        if (data.qcResult) {
          acceptedQty =
            itemDetail.acceptedQty -
            data.qcResult.reduce((acc, curr) => acc + curr.failQty, 0);
        }
        const args = {
          id: itemDetail.id,
          purchaseOrderId: parseInt(params.get("id")!!),
          purchaseOrderLineId: itemDetail.purchaseOrderLineId,
          itemId: itemDetail.itemId,
          ...data,
          productionDate: productionDate,
          expiryDate: expiryDate,
          receiptDate: receiptDate,
        } as StockInLineEntry & ModalFormInput;
        //////////////////////////////////////////////////////////////////////
        if (hasErrors) {
          console.log(args);
          setServerError(t("An error has occurred. Please try again later."));
          setBtnIsLoading(false);
          setIsUploading(false)
          return;
        }
        console.log(args);
        // setBtnIsLoading(false);
        // setIsUploading(false)
        // return
        const res = await updateStockInLine(args);
        if (Boolean(res.id)) {
          // update entries
          const newEntries = res.entity as StockInLine[];
          console.log(newEntries);
          if (setEntries) {
            setEntries((prev) => {
              const updatedEntries = [...prev]; // Create a new array
              newEntries.forEach((item) => {
                const index = updatedEntries.findIndex((p) => p.id === item.id);
                if (index !== -1) {
                  // Update existing item
                  console.log(item);
                  updatedEntries[index] = item;
                } else {
                  // Add new item
                  updatedEntries.push(item);
                }
              });
              return updatedEntries; // Return the new array
            });
          }
          if (setStockInLine) {
            setStockInLine((prev) => {
              const updatedEntries = [...prev]; // Create a new array
              newEntries.forEach((item) => {
                const index = updatedEntries.findIndex((p) => p.id === item.id);
                if (index !== -1) {
                  // Update existing item
                  console.log(item);
                  updatedEntries[index] = item;
                } else {
                  // Add new item
                  updatedEntries.push(item);
                }
              });
              return updatedEntries; // Return the new array
            });
          }
          // add loading
          setBtnIsLoading(false);
          setIsUploading(false)
          setItemDetail(undefined);
          closeHandler({}, "backdropClick");
        }
        console.log(res);
        // if (res)
      } catch (e) {
        // server error
        setBtnIsLoading(false);
        setIsUploading(false)
        setServerError(t("An error has occurred. Please try again later."));
        console.log(e);
      }
    },
    [t, itemDetail, checkStockIn, checkPutaway]
  );

  const printQrcode = useCallback(async () => {
    setBtnIsLoading(true);
    setIsUploading(true)
    const postData = { stockInLineIds: [itemDetail.id] };
    // const postData = { stockInLineIds: [42,43,44] };
    const response = await fetchPoQrcode(postData);
    if (response) {
      console.log(response);
      downloadFile(new Uint8Array(response.blobValue), response.filename!!);
    }
    setBtnIsLoading(false);
    setIsUploading(false)
  }, [itemDetail, fetchPoQrcode, downloadFile]);

  const renderSubmitButton = useMemo((): boolean => {
    if (itemDetail) {
      const status = itemDetail.status;
      console.log(status);
      switch (type) {
        case "qc":
          return (
            stockInLineStatusMap[status] >= 1 &&
            stockInLineStatusMap[status] <= 2
          );
        case "escalation":
          return (
            stockInLineStatusMap[status] === 1 ||
            stockInLineStatusMap[status] >= 3 ||
            stockInLineStatusMap[status] <= 5
          );
        case "stockIn":
          return (
            stockInLineStatusMap[status] >= 3 &&
            stockInLineStatusMap[status] <= 6
          );
        case "putaway":
          return stockInLineStatusMap[status] === 7;
        default:
          return false; // Handle unexpected type
      }
    } else return false;
  }, [type, itemDetail]);
  // useEffect(() => {
  //   console.log(renderSubmitButton)
  // }, [renderSubmitButton])
  return (
    <>
      <FormProvider {...formProps}>
        <Modal open={open} onClose={closeHandler}>
          <Box
            sx={style}
            component="form"
            onSubmit={formProps.handleSubmit(onSubmit)}
          >
            {itemDetail !== undefined && type === "qc" && (
              <QcForm qc={qc!!} itemDetail={itemDetail} disabled={renderSubmitButton}/>
            )}
            {itemDetail !== undefined && type === "stockIn" && (
              <StockInForm itemDetail={itemDetail} disabled={renderSubmitButton}/>
            )}
            {itemDetail !== undefined && type === "escalation" && (
              <EscalationForm itemDetail={itemDetail} disabled={renderSubmitButton}/>
            )}
            {itemDetail !== undefined && type === "putaway" && (
              <PutawayForm itemDetail={itemDetail} warehouse={warehouse!!} disabled={renderSubmitButton}/>
            )}
            <Stack direction="row" justifyContent="flex-end" gap={1}>
              {renderSubmitButton ? (
                <Button
                  name="submit"
                  variant="contained"
                  startIcon={<Check />}
                  type="submit"
                  disabled={btnIsLoading}
                >
                  {t("submit")}
                </Button>
              ) : undefined}
              {itemDetail !== undefined && type === "putaway" && (
                <Button
                  name="print"
                  variant="contained"
                  // startIcon={<Check />}
                  onClick={printQrcode}
                  disabled={btnIsLoading}
                >
                  {t("print")}
                </Button>
              )}
            </Stack>
          </Box>
        </Modal>
      </FormProvider>
    </>
  );
};
export default PoQcStockInModal;