tsms/src/components/ProgressByClientSearch/ProgressByClientSearch.tsx

"use client";

import { ProjectResult } from "@/app/api/projects";
import React, { useMemo, useState, useCallback } from "react";
import SearchBox, { Criterion } from "../SearchBox";
import { useTranslation } from "react-i18next";
import SearchResults, { Column } from "../SearchResults";
import { ClientProjectResult} from "@/app/api/clientprojects";
import { fetchAllClientSubsidiaryProjects} from "@/app/api/clientprojects/actions";
import VisibilityIcon from '@mui/icons-material/Visibility';
import { useRouter, useSearchParams } from "next/navigation";
import ProgressByClient from "@/components/ProgressByClient";

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

const ProgressByClientSearch: React.FC<Props> = ({ clientProjects }) => {
  const { t } = useTranslation("projects");
  const searchParams = useSearchParams()
  // If project searching is done on the server-side, then no need for this.
  const [filteredProjects, setFilteredProjects] = useState(clientProjects);
  const [clientSubsidiaryProjectResult, setClientSubsidiaryProjectResult]:any[] = useState([]);

  const searchCriteria: Criterion<SearchParamNames>[] = useMemo(
    () => [
      { label: "Client Code", paramName: "customerCode", type: "text" },
      { label: "Client Name", paramName: "customerName", type: "text" },
    ],
    [t],
  );

//   const onTaskClick = useCallback((clientProjectResult: ClientProjectResult) => {
//     const clickResult = fetchAllClientSubsidiaryProjects(clientProjectResult.customerId, clientProjectResult.subsidiaryId)
//     console.log(clickResult)
//     setClientSubsidiaryProjectResult(clickResult)
    
// }, []);

  const onTaskClick = useCallback(async (clientProjectResult: ClientProjectResult) => {
    try {
        const clickResult = await fetchAllClientSubsidiaryProjects(clientProjectResult.customerId, clientProjectResult.subsidiaryId);
        console.log(clickResult);
        setClientSubsidiaryProjectResult(clickResult);
    } catch (error) {
        console.error('Error fetching client subsidiary projects:', error);
    }
  }, []);


  const columns = useMemo<Column<ClientProjectResult>[]>(
    () => [
      {
        name: "id",
        label: t("Details"),
        onClick: onTaskClick,
        buttonIcon: <VisibilityIcon />,
      },
      { name: "customerCode", label: t("Client Code") },
      { name: "customerName", label: t("Client Name") },
      { name: "subsidiaryCode", label: t("Subsidiary Code") },
      { name: "subsidiaryName", label: t("Subisdiary") },
      { name: "projectNo", label: t("No. of Projects") },
    ],
    [onTaskClick, t],
    // [t],
  );

  return (
    <>
      <SearchBox
        criteria={searchCriteria}
        onSearch={(query) => {
          setFilteredProjects(
            clientProjects.filter(
              (cp) =>
                cp.customerCode.toLowerCase().includes(query.customerCode.toLowerCase()) &&
                cp.customerName.toLowerCase().includes(query.customerName.toLowerCase()) 
            ),
          );
        }}
      />
      <SearchResults<ClientProjectResult>
        items={filteredProjects}
        columns={columns}
      />
      <ProgressByClient clientSubsidiaryProjectResult={clientSubsidiaryProjectResult}/>
    </>
  );
};

export default ProgressByClientSearch;