FPSMS-frontend/src/components/RoughSchedule/RoughSchedileSearchView.tsx

"use client";

import React, { useCallback, useEffect, useMemo, useState } from "react";
import SearchBox, { Criterion } from "../SearchBox";
import { ItemsResult } from "@/app/api/settings/item";
import SearchResults, { Column } from "../SearchResults";
import { EditNote } from "@mui/icons-material";
import { useRouter, useSearchParams } from "next/navigation";
import { GridDeleteIcon } from "@mui/x-data-grid";
import { TypeEnum } from "@/app/utils/typeEnum";
import axios from "axios";
import { BASE_API_URL, NEXT_PUBLIC_API_URL } from "@/config/api";
import { useTranslation } from "react-i18next";
import axiosInstance from "@/app/(main)/axios/axiosInstance";
import Qs from "qs";
import EditableSearchResults from "@/components/SearchResults/EditableSearchResults"; // Make sure to import Qs
import {
  ProdScheduleResult,
  ProdScheduleResultByPage,
  SearchProdSchedule,
  fetchProdSchedules,
  testDetailedSchedule,
  testRoughSchedule,
} from "@/app/api/scheduling/actions";
import { arrayToDateString, decimalFormatter } from "@/app/utils/formatUtil";
import { isEqual, uniqBy } from "lodash";
import dayjs from "dayjs";
import { defaultPagingController } from "../SearchResults/SearchResults";
import { ScheduleType } from "@/app/api/scheduling";
import { Button, Stack } from "@mui/material";

// type RecordStructure ={
//     id: number,
//     schedulePeriod: string,
//     scheduleAt: string
// };

type Props = {
  type: ScheduleType;
  // initProdSchedules: ProdScheduleResultByPage;
  defaultInputs: SearchProdSchedule;
};

type SearchQuery = Partial<
  Omit<SearchProdSchedule, "id" | "types" | "pageSize" | "pageNum">
>;
type SearchParamNames = keyof SearchQuery;

const RSOverview: React.FC<Props> = ({ type, defaultInputs }) => {
  const [filteredSchedules, setFilteredSchedules] = useState<
    ProdScheduleResult[]
  >([]);
  const { t } = useTranslation("schedule");
  const router = useRouter();
  // const [filterObj, setFilterObj] = useState({});
  // const [tempSelectedValue, setTempSelectedValue] = useState({});
  const [pagingController, setPagingController] = useState(
    defaultPagingController,
  );
  const [totalCount, setTotalCount] = useState(0);
  const [inputs, setInputs] = useState(defaultInputs);

  const searchCriteria: Criterion<SearchParamNames>[] = useMemo(() => {
    const searchCriteria: Criterion<SearchParamNames>[] = [
      {
        label: t("Schedule Period"),
        label2: t("Schedule Period To"),
        paramName: "schedulePeriod",
        type: "dateRange",
      },
      { label: t("Scheduled At"), paramName: "scheduleAt", type: "date" },
      {
        label: t("Product Count"),
        paramName: "totalEstProdCount",
        type: "text",
      },
    ];
    return searchCriteria;
  }, [t]);

  // const onDetailClick = useCallback(
  //     (item: ItemsResult) => {
  //         router.push(`/settings/items/edit?id=${item.id}`);
  //     },
  //     [router]
  // );

  // const onDeleteClick = useCallback(
  //     (item: ItemsResult) => { },
  //     [router]
  // );

  const onDetailClick = (record: ProdScheduleResult) => {
    console.log("[debug] record", record);
    router.push(`/scheduling/rough/edit?id=${record.id}`);
  };

  const columns = useMemo<Column<ProdScheduleResult>[]>(
    () => [
      {
        name: "id",
        label: t("Details"),
        onClick: (record) => onDetailClick(record),
        buttonIcon: <EditNote />,
      },
      {
        name: "schedulePeriod",
        label: t("Demand Forecast Period"),
        renderCell: (params) => {
          return `${arrayToDateString(
            params.schedulePeriod,
          )} - ${arrayToDateString(params.schedulePeriodTo)}`;
        },
      },
      {
        name: "scheduleAt",
        label: t("Schedule At"),
        renderCell: (params) => {
          return arrayToDateString(params.scheduleAt);
        },
      },
      {
        name: "totalEstProdCount",
        label: t("Product Count(s)"),
        headerAlign: "right",
        align: "right",
        renderCell: (params) => {
          return decimalFormatter.format(params.totalEstProdCount);
        },
      },
      // {
      //     name: "action",
      //     label: t(""),
      //     buttonIcon: <GridDeleteIcon />,
      //     onClick: onDeleteClick,
      // },
    ],
    [filteredSchedules],
  );

  // useEffect(() => {
  //     refetchData(filterObj);

  // }, [filterObj, pagingController.pageNum, pagingController.pageSize]);

  const refetchData = useCallback(
    async (
      query: Record<SearchParamNames, string> | SearchProdSchedule,
      actionType: "reset" | "search" | "paging",
    ) => {
      // console.log(query)
      const params: SearchProdSchedule = {
        scheduleAt: dayjs(query?.scheduleAt).isValid()
          ? query?.scheduleAt
          : undefined,
        schedulePeriod: dayjs(query?.schedulePeriod).isValid()
          ? query?.schedulePeriod
          : undefined,
        schedulePeriodTo: dayjs(query?.schedulePeriodTo).isValid()
          ? query?.schedulePeriodTo
          : undefined,
        totalEstProdCount: query?.totalEstProdCount
          ? Number(query?.totalEstProdCount)
          : undefined,
        types: ["rough"],
        pageNum: pagingController.pageNum - 1,
        pageSize: pagingController.pageSize,
      };
      const response = await fetchProdSchedules(params);

      // console.log(response)
      if (response) {
        setTotalCount(response.total);
        switch (actionType) {
          case "reset":
          case "search":
            setFilteredSchedules(() => response.records);
            break;
          case "paging":
            setFilteredSchedules((fs) =>
              uniqBy([...fs, ...response.records], "id"),
            );
            break;
        }
      }
    },
    [pagingController, setPagingController],
  );

  useEffect(() => {
    refetchData(inputs, "paging");
  }, [pagingController]);

  // const refetchData = async (filterObj: SearchQuery) => {

  //     const authHeader = axiosInstance.defaults.headers['Authorization'];
  //     if (!authHeader) {
  //         return; // Exit the function if the token is not set
  //     }

  //     const params ={
  //         pageNum: pagingController.pageNum,
  //         pageSize: pagingController.pageSize,
  //         ...filterObj,
  //         ...tempSelectedValue,
  //     }

  //     try {
  //         // const response = await axiosInstance.get<ItemsResult[]>(`${NEXT_PUBLIC_API_URL}/items/getRecordByPage`, {
  //         //     params,
  //         //     paramsSerializer: (params) => {
  //         //         return Qs.stringify(params, { arrayFormat: 'repeat' });
  //         //     },
  //         // });
  //         //setFilteredSchedules(response.data.records);
  //         // setFilteredSchedules([
  //         //     {
  //         //         id: 1,
  //         //         scheduledPeriod: "2025-05-11 to 2025-05-17",
  //         //         scheduledAt: "2025-05-07",
  //         //         productCount: 13,
  //         //     },
  //         //     {
  //         //         id: 2,
  //         //         scheduledPeriod: "2025-05-18 to 2025-05-24",
  //         //         scheduledAt: "2025-05-14",
  //         //         productCount: 15,
  //         //     },
  //         //     {
  //         //         id: 3,
  //         //         scheduledPeriod: "2025-05-25 to 2025-05-31",
  //         //         scheduledAt: "2025-05-21",
  //         //         productCount: 13,
  //         //     },
  //         // ])
  //         setPagingController({
  //             ...pagingController,
  //             // totalCount: response.data.total
  //         })
  //         // return response; // Return the data from the response
  //     } catch (error) {
  //         console.error('Error fetching items:', error);
  //         throw error; // Rethrow the error for further handling
  //     }
  // };

  const onReset = useCallback(() => {
    // setFilteredSchedules(items ?? []);
    // setFilterObj({});
    // setTempSelectedValue({});
    refetchData(defaultInputs, "reset");
  }, []);

  const testRoughScheduleClick = useCallback(async () => {
    const response = await testRoughSchedule()

    if (response) {
      refetchData(inputs, "paging");
    }
  }, []);

  return (
    <>
      <Stack
        direction="row"
        justifyContent="flex-end"
        flexWrap="wrap"
        rowGap={2}
      >
        <Button
          variant="contained"
          onClick={testRoughScheduleClick}
        >
          {t("Test Rough Schedule")}
        </Button>
      </Stack>
      <SearchBox
        criteria={searchCriteria}
        onSearch={(query) => {
          // resetPagingController()
          setInputs(() => ({
            scheduleAt: query?.scheduleAt,
            schedulePeriod: query?.schedulePeriod,
            schedulePeriodTo: query?.schedulePeriodTo,
            totalEstProdCount: Number(query?.totalEstProdCount),
          }));
          refetchData(query, "search");
          // setFilterObj({
          //     ...query
          // })
        }}
        onReset={onReset}
      />
      <SearchResults<ProdScheduleResult>
        items={filteredSchedules}
        columns={columns}
        setPagingController={setPagingController}
        pagingController={pagingController}
        totalCount={totalCount}
      // isAutoPaging={false}
      />
    </>
  );
};

export default RSOverview;