"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 { ResourceSummaryResult } from "@/app/api/resourcesummary";
import EditNote from "@mui/icons-material/EditNote";
import { useRouter, useSearchParams } from "next/navigation";
import ProjectResourceSummary from "@/components/ProjectResourceSummary";
import ArticleIcon from '@mui/icons-material/Article';
import Typography from "@mui/material/Typography";

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


const ProjectResourceSummarySearch: React.FC<Props> = ({ projects }) => {
  const { t } = useTranslation("dashboard");
  const router = useRouter();
  const searchParams = useSearchParams()
  // 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: t("Project Code"), paramName: "projectCode", type: "text" },
      { label: t("Project Name"), paramName: "projectName", type: "text" },
      { label: t("Client Code"), paramName: "customerCode", type: "text" },
      { label: t("Client Name"), paramName: "customerName", type: "text" },
    ],
    [t],
  );

    const onTaskClick = useCallback((resourceSummaryResult: ResourceSummaryResult) => {
      try {
        console.log(resourceSummaryResult)
        router.push(
          `/dashboard/ProjectResourceSummary?projectId=${resourceSummaryResult.id}`
        );
      } catch (error) {
          console.error('Error fetching team projects:', error);
      }
  }, []);


  const columns = useMemo<Column<ResourceSummaryResult>[]>(
    () => [
      {
        name: "id",
        label: t("Details"),
        onClick: onTaskClick,
        buttonIcon: <ArticleIcon />,
      },
      { name: "projectCode", label: t("Project Code") },
      { name: "projectName", label: t("Project Name") },
      { name: "customerCodeAndName", label: t("Client Code And Name") },
      { name: "subsidiaryCodeAndName", label: t("Subsidiary Code And Name")}
    ],
    [onTaskClick, t],
    // [t],
  );

  return (
    <>
      <Typography variant="h4" marginInlineEnd={2}>
        {t("Project Resource Summary")}
      </Typography>
      <SearchBox
        criteria={searchCriteria}
        onSearch={(query) => {
          setFilteredProjects(
            projects.filter(
              (cp) =>
                cp.projectCode.toLowerCase().includes(query.projectCode.toLowerCase()) &&
                cp.projectName.toLowerCase().includes(query.projectName.toLowerCase()) &&
                cp.customerCodeAndName.toLowerCase().includes(query.customerCode.toLowerCase()) &&
                cp.customerCodeAndName.toLowerCase().includes(query.customerName.toLowerCase())
            ),
          );
        }}
      />
      <SearchResults<ResourceSummaryResult>
        items={filteredProjects}
        columns={columns}
      /> 
      <ProjectResourceSummary/>
    </>
  );
};

export default ProjectResourceSummarySearch;
