FPSMS-frontend/src/components/RoughScheduleDetail/ViewByBomDetails.tsx

"use client";

import { CreateItemInputs } from "@/app/api/settings/item/actions";
import {
  GridColDef,
  GridRowModel,
  GridRenderEditCellParams,
  GridEditInputCell,
  GridRowSelectionModel,
  useGridApiRef,
} from "@mui/x-data-grid";
import {
  MutableRefObject,
  useCallback,
  useEffect,
  useMemo,
  useState,
} from "react";
import { useFieldArray, useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next";
import InputDataGrid, { TableRow } from "../InputDataGrid/InputDataGrid";
import { Box, Grid, Tooltip, Typography } from "@mui/material";
import { ItemQc } from "@/app/api/settings/item";
import { QcChecksInputs } from "@/app/api/settings/qcCheck/actions";
import { GridApiCommunity } from "@mui/x-data-grid/internals";
import { RiceBowl } from "@mui/icons-material";
// import EditableSearchResults, { Column } from "@/components/SearchResults/EditableSearchResults";
import { decimalFormatter } from "@/app/utils/formatUtil";
import { GridRenderCellParams } from "@mui/x-data-grid";
import {
  RoughProdScheduleLineResultByBom,
  RoughProdScheduleLineResultByBomByDate,
  RoughProdScheduleResult,
  ScheduleType,
} from "@/app/api/scheduling";
import ScheduleTable from "@/components/ScheduleTable";
import { Column } from "@/components/ScheduleTable/ScheduleTable";

type Props = {
  apiRef: MutableRefObject<GridApiCommunity>;
  isEdit: boolean;
  type: ScheduleType;
  dayPeriod: string[];
};

// export type FGRecord = {
//     id: string | number
//     code: string;
//     name: string;
//     inStockQty: number;
//     purchaseQty: number;
// }

// export type FGOverallRecord = {
//     id: string | number
//     code: string;
//     name: string;
//     type: string;
//     inStockQty: number;
//     purchaseQty: number;
//     purchaseQty1: number;
//     purchaseQty2: number;
//     purchaseQty3: number;
//     purchaseQty4: number;
//     purchaseQty5: number;
//     purchaseQty6: number;
//     purchaseQty7: number;
//     overallPurchaseQty: number;
// }

const ViewByBomDetails: React.FC<Props> = ({
  apiRef,
  isEdit,
  type,
  dayPeriod,
}) => {
  const {
    t,
    i18n: { language },
  } = useTranslation("schedule");
  const {
    control,
    getValues,
    formState: { errors, defaultValues, touchedFields },
  } = useFormContext<RoughProdScheduleResult>();
  //   const apiRef = useGridApiRef();

  const { fields } = useFieldArray({
    control,
    name: "prodScheduleLinesByBom",
  });

  const [pagingController, setPagingController] = useState([
    {
      pageNum: 1,
      pageSize: 10,
      totalCount: 0,
    },
    {
      pageNum: 1,
      pageSize: 10,
      totalCount: 0,
    },
    {
      pageNum: 1,
      pageSize: 10,
      totalCount: 0,
    },
    {
      pageNum: 1,
      pageSize: 10,
      totalCount: 0,
    },
    {
      pageNum: 1,
      pageSize: 10,
      totalCount: 0,
    },
    {
      pageNum: 1,
      pageSize: 10,
      totalCount: 0,
    },
    {
      pageNum: 1,
      pageSize: 10,
      totalCount: 0,
    },
    {
      pageNum: 1,
      pageSize: 10,
      totalCount: 0,
    },
  ]);

  const updatePagingController = (updatedObj: {
    pageNum: number;
    pageSize: number;
    totalCount: number;
    index?: number | undefined;
  }) => {
    setPagingController((prevState) => {
      return prevState.map((item, index) => {
        if (index === updatedObj?.index) {
          return {
            ...item,
            pageNum: item.pageNum,
            pageSize: item.pageSize,
            totalCount: item.totalCount,
          };
        } else return item;
      });
    });
  };

  const overallColumns = useMemo<Column<any>[]>(
    () => [
      {
        field: "code",
        label: t("code"),
        type: "read-only",
        // editable: true,
      },
      {
        field: "name",
        label: t("name"),
        type: "read-only",
      },
      {
        field: "type",
        label: t("type"),
        type: "read-only",
        renderCell: (params) => {
          return t(params.type);
        },
        // editable: true,
      },
      {
        field: "availableQty",
        label: t("Available Qty"),
        type: "read-only",
        style: {
          textAlign: "right",
        },
        renderCell: (row: RoughProdScheduleLineResultByBom) => {
          if (typeof row.availableQty == "number") {
            return decimalFormatter.format(row.availableQty);
          }
          return row.availableQty;
        },
        // editable: true,
      },
      {
        field: "totalDemandQty",
        label: t("Total Demand Qty"),
        type: "read-only",
        style: {
          textAlign: "right",
        },
        renderCell: (row: RoughProdScheduleLineResultByBom) => {
          if (typeof row.totalDemandQty == "number") {
            return decimalFormatter.format(row.totalDemandQty);
          }
          return row.totalDemandQty;
        },
      },
      {
        field: "demandQty1",
        label: t("Demand Qty (Day1)"),
        type: "read-only",
        style: {
          textAlign: "right",
        },
        renderCell: (row: RoughProdScheduleLineResultByBom) => {
          if (typeof row.demandQty1 == "number") {
            return decimalFormatter.format(row.demandQty1);
          }
          return row.demandQty1;
        },
      },
      {
        field: "demandQty2",
        label: t("Demand Qty (Day2)"),
        type: "read-only",
        style: {
          textAlign: "right",
        },
        renderCell: (row: RoughProdScheduleLineResultByBom) => {
          if (typeof row.demandQty2 == "number") {
            return decimalFormatter.format(row.demandQty2);
          }
          return row.demandQty2;
        },
      },
      {
        field: "demandQty3",
        label: t("Demand Qty (Day3)"),
        type: "read-only",
        style: {
          textAlign: "right",
        },
        renderCell: (row: RoughProdScheduleLineResultByBom) => {
          if (typeof row.demandQty3 == "number") {
            return decimalFormatter.format(row.demandQty3);
          }
          return row.demandQty3;
        },
      },
      {
        field: "demandQty4",
        label: t("Demand Qty (Day4)"),
        type: "read-only",
        style: {
          textAlign: "right",
        },
        renderCell: (row: RoughProdScheduleLineResultByBom) => {
          if (typeof row.demandQty4 == "number") {
            return decimalFormatter.format(row.demandQty4);
          }
          return row.demandQty4;
        },
      },
      {
        field: "demandQty5",
        label: t("Demand Qty (Day5)"),
        type: "read-only",
        style: {
          textAlign: "right",
        },
        renderCell: (row: RoughProdScheduleLineResultByBom) => {
          if (typeof row.demandQty5 == "number") {
            return decimalFormatter.format(row.demandQty5);
          }
          return row.demandQty5;
        },
      },
      {
        field: "demandQty6",
        label: t("Demand Qty (Day6)"),
        type: "read-only",
        style: {
          textAlign: "right",
        },
        renderCell: (row: RoughProdScheduleLineResultByBom) => {
          if (typeof row.demandQty6 == "number") {
            return decimalFormatter.format(row.demandQty6);
          }
          return row.demandQty6;
        },
      },
      {
        field: "demandQty7",
        label: t("Demand Qty (Day7)"),
        type: "read-only",
        style: {
          textAlign: "right",
        },
        renderCell: (row: RoughProdScheduleLineResultByBom) => {
          if (typeof row.demandQty7 == "number") {
            return decimalFormatter.format(row.demandQty7);
          }
          return row.demandQty7;
        },
      },
      {
        field: "uomName",
        label: t("UoM"),
        type: "read-only",
        style: {
          textAlign: "left",
        },
        renderCell: (row) => {
          return row.uomName;
        },
      },
    ],
    [t],
  );

  const columns = useMemo<Column<RoughProdScheduleLineResultByBomByDate>[]>(
    () => [
      {
        field: "code",
        label: t("code"),
        type: "read-only",
        // editable: true,
      },
      {
        field: "name",
        label: t("name"),
        type: "read-only",
      },
      {
        field: "type",
        label: t("type"),
        type: "read-only",
        renderCell: (params) => {
          return t(params.type);
        },
      },
      {
        field: "availableQty",
        label: t("Available Qty"),
        type: "read-only",
        // editable: true,
        style: {
          textAlign: "right",
        },
        renderCell: (row: RoughProdScheduleLineResultByBomByDate) => {
          if (typeof row.availableQty == "number") {
            return decimalFormatter.format(row.availableQty);
          }
          return row.availableQty;
        },
      },
      {
        field: "demandQty",
        label: t("Demand Qty"),
        type: "read-only",
        style: {
          textAlign: "right",
        },
        renderCell: (row: RoughProdScheduleLineResultByBomByDate) => {
          if (typeof row.demandQty == "number") {
            return decimalFormatter.format(row.demandQty);
          }
          return row.demandQty;
        },
      },
      {
        field: "uomName",
        label: t("UoM"),
        type: "read-only",
        style: {
          textAlign: "left",
        },
        renderCell: (row) => {
          return row.uomName;
        },
      },
    ],
    [],
  );

  return (
    <Grid container spacing={2}>
      <Grid item xs={12} key={"all"}>
        <Typography variant="overline" display="block" marginBlockEnd={1}>
          {t("Material Demand List (7 Days)")}
        </Typography>
        <ScheduleTable<RoughProdScheduleLineResultByBom>
          // index={7}
          type={type}
          items={getValues("prodScheduleLinesByBom")}
          columns={overallColumns}
          setPagingController={updatePagingController}
          pagingController={pagingController[7]}
          isAutoPaging={true}
          isEditable={false}
          isEdit={false}
          hasCollapse={false}
        />
      </Grid>
      {dayPeriod.map((date, index) => (
        <Grid item xs={12} key={index}>
          <Typography variant="overline" display="block" marginBlockEnd={1}>
            {`${t("Material Demand Date")}: ${date}`}
          </Typography>
          <ScheduleTable<RoughProdScheduleLineResultByBomByDate>
            // index={index}
            type={type}
            items={getValues("prodScheduleLinesByBomByDate")[index + 1]} // Use the corresponding records for the day
            columns={columns}
            setPagingController={updatePagingController}
            pagingController={pagingController[index]}
            isAutoPaging={true}
            isEditable={false}
            isEdit={isEdit}
            hasCollapse={false}
          />
        </Grid>
      ))}
    </Grid>
  );
};
export default ViewByBomDetails;