"use client";

import SearchBox, { Criterion } from "../SearchBox";
import { useCallback, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import SearchResults, { Column } from "../SearchResults/index";
import { StockIssueResult } from "./action";

interface Props {
  dataList: StockIssueResult[];
};
type SearchQuery = Partial<Omit<StockIssueResult, "id">>;
type SearchParamNames = keyof SearchQuery;

const SearchPage: React.FC<Props> = ({dataList}) => {
    const { t } = useTranslation("user");
    const [filteredList, setFilteredList] = useState(dataList);

    const searchCriteria: Criterion<SearchParamNames>[] = useMemo(
        () => [
          {
            label: t("Lot No."),
            paramName: "lotNo",
            type: "text",
          },
        ],
        [t],
      );

    const columns = useMemo<Column<StockIssueResult>[]>(
    () => [
      { name: "itemCode", label: t("Item Code") },
      { name: "itemDescription", label: t("Item") },
      { name: "lotNo", label: t("Lot No.") },
      { name: "storeLocation", label: t("Location") },
      { name: "badItemQty", label: t("Defective Qty") }
    ],
    [t],
  );

  return (
    <>
      <SearchBox
        criteria={searchCriteria}
        onSearch={(query) => {
        }}
      />
      <SearchResults<StockIssueResult>
        items={filteredList}
        columns={columns}
        pagingController={{ pageNum: 1, pageSize: 10 }}
      />
    </>
  );
};

export default SearchPage;