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

"use client";

import { StockInLineEntry, EscalationInput } from "@/app/api/po/actions";
import {
  Box,
  Card,
  CardContent,
  Grid,
  Stack,
  TextField,
  Tooltip,
  Typography,
} from "@mui/material";
import { useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next";
import StyledDataGrid from "../StyledDataGrid";
import { useCallback, useEffect, useMemo } from "react";
import {
  GridColDef,
  GridRowIdGetter,
  GridRowModel,
  useGridApiContext,
  GridRenderCellParams,
  GridRenderEditCellParams,
  useGridApiRef,
} from "@mui/x-data-grid";
import InputDataGrid from "../InputDataGrid";
import { TableRow } from "../InputDataGrid/InputDataGrid";
import TwoLineCell from "./TwoLineCell";
import QcSelect from "./QcSelect";
import { QcItemWithChecks } from "@/app/api/qc";
import { GridEditInputCell } from "@mui/x-data-grid";
import { StockInLine } from "@/app/api/po";
import { stockInLineStatusMap } from "@/app/utils/formatUtil";

interface Props {
  itemDetail: StockInLine;
  //   qc: QcItemWithChecks[];
  disabled: boolean;
}
type EntryError =
  | {
      [field in keyof StockInLineEntry]?: string;
    }
  | undefined;

const EscalationForm: React.FC<Props> = ({
  //   qc,
  itemDetail,
  disabled,
}) => {
  const { t } = useTranslation("purchaseOrder");
  const apiRef = useGridApiRef();
  const {
    register,
    formState: { errors, defaultValues, touchedFields },
    watch,
    control,
    setValue,
    getValues,
    reset,
    resetField,
    setError,
    clearErrors,
  } = useFormContext<EscalationInput>();
  console.log(itemDetail);

  const [status, determineCount] = useMemo(() => {
    switch (itemDetail.status) {
      case "pending":
        return ["determine1", 1];
      case "determine1":
        return ["determine2", 2];
      case "determine2":
        return ["determine3", 3];
      default:
        return ["receiving", "receive or reject"];
    }
  }, [itemDetail]);

  // const acceptedQty = watch("acceptedQty") || 0
  const acceptedQty = watch("acceptedQty") || 0;

  // console.log(acceptedQty)
  console.log(acceptedQty);
  console.log(itemDetail.acceptedQty);
  useEffect(() => {
    console.log("triggered");
    setValue("status", status);
  }, [setValue, status]);

  return (
    <Grid container justifyContent="flex-start" alignItems="flex-start">
      <Grid item xs={12}>
        <Typography variant="h6" display="block" marginBlockEnd={1}>
          {t(`Escalation`)}: {determineCount}
        </Typography>
      </Grid>
      {/* <Grid item xs={12}>
        <Typography variant="h6" display="block" marginBlockEnd={1}>
          {t(`to be processed`)}: {itemDetail.acceptedQty - acceptedQty}
        </Typography>
      </Grid> */}
      <Grid
        container
        justifyContent="flex-start"
        alignItems="flex-start"
        spacing={2}
        sx={{ mt: 0.5 }}
      >
        <Grid item xs={12}>
          <TextField
            label={t("productLotNo")}
            fullWidth
            {...register("productLotNo", {
              required: "productLotNo required!",
            })}
            disabled={disabled}
            error={Boolean(errors.productLotNo)}
            helperText={errors.productLotNo?.message}
          />
        </Grid>
        <Grid item xs={6}>
          <TextField
            label={t("reportQty")}
            fullWidth
            {...register("acceptedQty", {
              required: "acceptedQty required!",
              min: 0,
              valueAsNumber: true,
              max: itemDetail.acceptedQty,
            })}
            disabled={disabled}
            defaultValue={itemDetail.acceptedQty}
            error={Boolean(errors.acceptedQty)}
            helperText={errors.acceptedQty?.message}
          />
        </Grid>
        <Grid item xs={6}>
          <TextField
            label={t("uom")}
            fullWidth
            disabled={true}
            defaultValue={itemDetail.uom.code}
          />
        </Grid>
        <Grid item xs={12}>
          <TextField
            label={t("remarks")}
            fullWidth
            {...register("remarks", {

            })}
            disabled={disabled}
          />
        </Grid>
      </Grid>
      <Grid
        container
        justifyContent="flex-start"
        alignItems="flex-start"
        spacing={2}
        sx={{ mt: 0.5 }}
      ></Grid>
    </Grid>
  );
};
export default EscalationForm;