FPSMS-frontend/src/components/PoSearch/PoSearch.tsx

"use client";

import { PoResult } from "@/app/api/po";
import { useCallback, useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useRouter, useSearchParams } from "next/navigation";
import SearchBox, { Criterion } from "../SearchBox";
import SearchResults, { Column } from "../SearchResults";
import { EditNote } from "@mui/icons-material";
import { Button, Grid, Tab, Tabs, TabsProps, Typography } from "@mui/material";
import QrModal from "../PoDetail/QrModal";
import { WarehouseResult } from "@/app/api/warehouse";
import NotificationIcon from "@mui/icons-material/NotificationImportant";
import { useSession } from "next-auth/react";
import { defaultPagingController } from "../SearchResults/SearchResults";
import { fetchPoListClient, testing } from "@/app/api/po/actions";
import dayjs from "dayjs";
import { arrayToDateString, OUTPUT_DATE_FORMAT } from "@/app/utils/formatUtil";
import arraySupport from "dayjs/plugin/arraySupport";
import { Checkbox, Box } from "@mui/material";
dayjs.extend(arraySupport);

type Props = {
  po: PoResult[];
  warehouse: WarehouseResult[];
  totalCount: number;
};
type SearchQuery = Partial<Omit<PoResult, "id">>;
type SearchParamNames = keyof SearchQuery;

// cal offset (pageSize)
// cal limit (pageSize)
const PoSearch: React.FC<Props> = ({
  po,
  warehouse,
  totalCount: initTotalCount,
}) => {
  const [selectedPoIds, setSelectedPoIds] = useState<number[]>([]);
  const [selectAll, setSelectAll] = useState(false);
  const [filteredPo, setFilteredPo] = useState<PoResult[]>(po);
  const [filterArgs, setFilterArgs] = useState<Record<string, any>>({});
  const { t } = useTranslation("purchaseOrder");
  const router = useRouter();
  const [pagingController, setPagingController] = useState(
    defaultPagingController,
  );
  const [totalCount, setTotalCount] = useState(initTotalCount);
  const searchCriteria: Criterion<SearchParamNames>[] = useMemo(() => {
    const searchCriteria: Criterion<SearchParamNames>[] = [
      { label: t("Supplier"), paramName: "supplier", type: "text" },
      { label: t("Po No."), paramName: "code", type: "text" },
      {
        label: t("Escalated"),
        paramName: "escalated",
        type: "select",
        options: [t("Escalated"), t("NotEscalated")],
      },
      { label: t("Order Date"), label2: t("Order Date To"), paramName: "orderDate", type: "dateRange" },
      {
        label: t("Status"),
        paramName: "status",
        type: "select-labelled",
        options: [
          { label: t(`pending`), value: `pending` },
          { label: t(`receiving`), value: `receiving` },
          { label: t(`completed`), value: `completed` },
        ],
      },
      { label: t("ETA"), label2: t("ETA To"), paramName: "estimatedArrivalDate", type: "dateRange" },
      
    ];
    return searchCriteria;
  }, [t]);

  const onDetailClick = useCallback(
    (po: PoResult) => {
      setSelectedPoIds([]);
      setSelectAll(false);
      router.push(`/po/edit?id=${po.id}&start=true&selectedIds=${po.id}`);
    },
    [router],
  );

  const onDeleteClick = useCallback((po: PoResult) => {}, []);
  // handle single checkbox selection
  const handleSelectPo = useCallback((poId: number, checked: boolean) => {
    if (checked) {
      setSelectedPoIds(prev => [...prev, poId]);
    } else {
      setSelectedPoIds(prev => prev.filter(id => id !== poId));
    }
  }, []);

  // 处理全选
  const handleSelectAll = useCallback((checked: boolean) => {
    if (checked) {
      setSelectedPoIds(filteredPo.map(po => po.id));
      setSelectAll(true);
    } else {
      setSelectedPoIds([]);
      setSelectAll(false);
    }
  }, [filteredPo]);

  // navigate to PoDetail page
  const handleGoToPoDetail = useCallback(() => {
    if (selectedPoIds.length > 0) {
      const selectedIdsParam = selectedPoIds.join(',');
      const firstPoId = selectedPoIds[0];
      router.push(`/po/edit?id=${firstPoId}&start=true&selectedIds=${selectedIdsParam}`);
    }
  }, [selectedPoIds, router]);

  const columns = useMemo<Column<PoResult>[]>(
    () => [
      {
        name: "id" as keyof PoResult,
        label: "Select",
        renderCell: (params) => (
          <Checkbox
            checked={selectedPoIds.includes(params.id)}
            onChange={(e) => handleSelectPo(params.id, e.target.checked)}
            onClick={(e) => e.stopPropagation()}
          />
        ),
        width: 60,
      },
      {
        name: "id",
        label: t("Details"),
        onClick: onDetailClick,
        buttonIcon: <EditNote />,
      },
      {
        name: "code",
        label: `${t("Po No.")} &\n${t("Supplier")}`,
        renderCell: (params) => {
          return <>{params.code}<br/>{params.supplier}</>
        },
      },
      {
        name: "orderDate",
        label: `${t("Order Date")} &\n${t("ETA")}`,
        renderCell: (params) => {
          // return (
          //   dayjs(params.estimatedArrivalDate)
          //   .add(-1, "month")
          //   .format(OUTPUT_DATE_FORMAT)
          // );
          return <>{arrayToDateString(params.orderDate)}<br/>{arrayToDateString(params.estimatedArrivalDate)}</>
        },
      },
      {
        name: "itemDetail",
        label: t("Item Detail"),
        renderCell: (params) => {
          if (!params.itemDetail) {
            return "N/A"
          }
          const items = params.itemDetail.split(",")
          return items.map((item) => <Grid key={item}>{item}</Grid>)
        },
      },
      {
        name: "status",
        label: t("Status"),
        renderCell: (params) => {
          return t(`${params.status.toLowerCase()}`);
        },
      },
      {
        name: "escalated",
        label: t("Escalated"),
        renderCell: (params) => {
          console.log(params.escalated);
          return params.escalated ? (
            <NotificationIcon color="warning" />
          ) : undefined;
        },
      },
    ],
    [selectedPoIds, handleSelectPo, onDetailClick, t], // only keep necessary dependencies
  );

  const onReset = useCallback(() => {
    setFilteredPo(po);
  }, [po]);

  const [isOpenScanner, setOpenScanner] = useState(false);
  const onOpenScanner = useCallback(() => {
    setOpenScanner(true);
  }, []);

  const onCloseScanner = useCallback(() => {
    setOpenScanner(false);
  }, []);

  const newPageFetch = useCallback(
    async (
      pagingController: Record<string, number>,
      filterArgs: Record<string, number>,
    ) => {
      console.log(pagingController);
      console.log(filterArgs);
      const params = {
        ...pagingController,
        ...filterArgs,
      };
      const res = await fetchPoListClient(params);
      // const res = await testing(params);
      if (res) {
        console.log(res);
        setFilteredPo(res.records);
        setTotalCount(res.total);
      }
    },
    [],
  );

  useEffect(() => {
    console.log(filteredPo)
  }, [filteredPo])

  useEffect(() => {
    newPageFetch(pagingController, filterArgs);
  }, [newPageFetch, pagingController, filterArgs]);
  // when filteredPo changes, update select all state
  useEffect(() => {
    if (filteredPo.length > 0 && selectedPoIds.length === filteredPo.length) {
      setSelectAll(true);
    } else {
      setSelectAll(false);
    }
  }, [filteredPo, selectedPoIds]);
  return (
    <>
      <Grid container>
        <Grid item xs={8}>
          <Typography variant="h4" marginInlineEnd={2}>
            {t("Purchase Receipt")}
          </Typography>
        </Grid>
        <Grid item xs={4} display="flex" justifyContent="end" alignItems="end">
          <QrModal
            open={isOpenScanner}
            onClose={onCloseScanner}
            warehouse={warehouse}
          />
          <Button onClick={onOpenScanner}>{t("bind")}</Button>
        </Grid>
      </Grid>
      <>
        <SearchBox
          criteria={searchCriteria}
          onSearch={(query) => {
            console.log(query);
            setFilterArgs({
              code: query.code,
              supplier: query.supplier,
              status: query.status === "All" ? "" : query.status,
              escalated:
                query.escalated === "All"
                  ? undefined
                  : query.escalated === t("Escalated"),
              estimatedArrivalDate: query.estimatedArrivalDate === "Invalid Date" ? "" : query.estimatedArrivalDate,
              estimatedArrivalDateTo: query.estimatedArrivalDateTo === "Invalid Date" ? "" : query.estimatedArrivalDateTo,
              orderDate: query.orderDate === "Invalid Date" ? "" : query.orderDate,
              orderDateTo: query.orderDateTo === "Invalid Date" ? "" : query.orderDateTo,
            });
            setSelectedPoIds([]); // reset selected po ids
            setSelectAll(false); // reset select all
          }}
          onReset={onReset}
        />
        <SearchResults<PoResult>
          items={filteredPo}
          columns={columns}
          pagingController={pagingController}
          setPagingController={setPagingController}
          totalCount={totalCount}
          isAutoPaging={false}
        />
        {/* add select all and view selected button */}
        <Box sx={{ mb: 2, display: 'flex', alignItems: 'center', gap: 2 }}>
          <Button
            variant="outlined"
            onClick={() => handleSelectAll(!selectAll)}
            startIcon={<Checkbox checked={selectAll} />}
          >
            {t("Select All")} ({selectedPoIds.length} / {filteredPo.length})
          </Button>
          <Button 
            variant="contained" 
            onClick={handleGoToPoDetail}
            disabled={selectedPoIds.length === 0}
            color="primary"
          >
            {t("View Selected")} ({selectedPoIds.length})
          </Button>
        </Box>
      </>
    </>
  );
};
export default PoSearch;