"use client";

import { ProjectResult } from "@/app/api/projects";
import React, { useMemo, useState } from "react";
import SearchBox, { Criterion } from "../SearchBox";
import { useTranslation } from "react-i18next";
import SearchResults, { Column } from "../SearchResults";
import { CashFlow } from "@/app/api/cashflow";
import CustomDatagrid from "../CustomDatagrid/CustomDatagrid";
import { GridColDef, GridRowSelectionModel } from "@mui/x-data-grid";
import ProjectCashFlow from "../ProjectCashFlow";

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

const ProgressByClientSearch: React.FC<Props> = ({ projects }) => {
  const { t } = useTranslation("projects");
  const [selectionModel, setSelectionModel]: any[] = React.useState([]);
  const columns = [
    {
      id: "projectCode",
      field: "projectCode",
      headerName: "Project Code",
      flex: 1,
    },
    {
      id: "projectName",
      field: "projectName",
      headerName: "Project Name",
      flex: 1,
    },
    {
      id: "team",
      field: "team",
      headerName: "Team",
      flex: 1,
    },
    {
      id: "teamLeader",
      field: "teamLeader",
      headerName: "Team Leader",
      flex: 1,
    },
    {
      id: "startDate",
      field: "startDate",
      headerName: "Start Date",
      flex: 1,
    },
    {
      id: "targetEndDate",
      field: "targetEndDate",
      headerName: "Target End Date",
      flex: 1,
    },
    {
      id: "client",
      field: "client",
      headerName: "Client",
      flex: 1,
    },
    {
      id: "subsidiary",
      field: "subsidiary",
      headerName: "Subsidiary",
      flex: 1,
    },
  ];
  const rows = [
    {
      id: 1,
      projectCode: "M1001",
      projectName: "Consultancy Project A",
      team: "XXX",
      teamLeader: "XXX",
      startDate: "01/07/2022",
      targetEndDate: "01/04/2024",
      client: "Client B",
      subsidiary: "N/A",
    },
    {
      id: 2,
      projectCode: "M1301",
      projectName: "Consultancy Project AAAA",
      team: "XXX",
      teamLeader: "XXX",
      startDate: "01/09/2022",
      targetEndDate: "20/02/2024",
      client: "Client C",
      subsidiary: "Subsidiary A",
    },
    {
      id: 3,
      projectCode: "M1354",
      projectName: "Consultancy Project BBB",
      team: "YYY",
      teamLeader: "YYY",
      startDate: "01/02/2023",
      targetEndDate: "31/01/2024",
      client: "Client D",
      subsidiary: "Subsidiary C",
    },
  ];
  const [selectedTeamData, setSelectedTeamData]: any[] = React.useState(rows);
  const handleSelectionChange = (newSelectionModel: GridRowSelectionModel) => {
    const selectedRowsData = selectedTeamData.filter((row: any) =>
      newSelectionModel.includes(row.id),
    );
    console.log(selectedRowsData);
  };

  // If project searching is done on the server-side, then no need for this.
  const [filteredProjects, setFilteredProjects] = useState(projects);

  const searchCriteria: Criterion<SearchParamNames>[] = useMemo(
    () => [
      { label: "Project Code", paramName: "projectCode", type: "text" },
      { label: "Project Name", paramName: "projectName", type: "text" },
      {
        label: "Start Date From",
        label2: "Start Date To",
        paramName: "startDateFrom",
        type: "dateRange",
      },
    ],
    [t],
  );

  // const columns = useMemo<Column<CashFlow>[]>(
  //   () => [
  //     { name: "clientCode", label: t("Project Code") },
  //     { name: "clientName", label: t("Project Name") },
  //     { name: "SubsidiaryClientCode", label: t("Project Category") },
  //     { name: "SubsidiaryClientName", label: t("Team") },
  //     { name: "NoOfProjects", label: t("Client") },
  //   ],
  //   [t],
  // );

  return (
    <>
      <SearchBox
        criteria={searchCriteria}
        onSearch={(query) => {
          console.log(query);
        }}
      />
      {/* <ProjectCashFlow/> */}
    </>
  );
};

export default ProgressByClientSearch;
