tsms/src/components/TeamSearch/TeamSearch.tsx

"use client";

import { TeamResult } from "@/app/api/team";
import SearchBox, { Criterion } from "../SearchBox";
import { useCallback, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import SearchResults, { Column } from "../SearchResults/index";
import EditNote from "@mui/icons-material/EditNote";
import DeleteIcon from '@mui/icons-material/Delete';
import { deleteStaff } from "@/app/api/staff/actions";
import { useRouter } from "next/navigation";
import ConfirmModal from "./ConfirmDeleteModal";
import { deleteTeam } from "@/app/api/team/actions";


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

const TeamSearch: React.FC<Props> = ({ team }) => {
    const { t } = useTranslation();
    const [filteredTeam, setFilteredTeam] = useState(team);
    const [data, setData] = useState<TeamResult>();
    const [isOpen, setIsOpen] = useState(false);
    const router = useRouter();

    const searchCriteria: Criterion<SearchParamNames>[] = useMemo(
        () => [
          {
            label: t("Team Name"),
            paramName: "name",
            type: "text",
          },
          {
            label: t("Team Code"),
            paramName: "code",
            type: "text",
          },
          {
            label: t("Team Description"),
            paramName: "description",
            type: "text",
          },
        ],
        [t],
      );

      const onTeamClick = useCallback((team: TeamResult) => {
        console.log(team);
        const id = team.id
        router.push(`/settings/team/edit?id=${id}`);
      }, [router, t]);

      // const onDeleteClick = useCallback((team: TeamResult) => {
      //   console.log(team);
      //   deleteTeam

      // }, [router, t]);

      const onDeleteClick = (team: TeamResult) => {
        console.log(team);
        setData(team)
        setIsOpen(!isOpen)
      };

      const onConfirm = useCallback(async (team: TeamResult) => {
        console.log(team);
        if (data)
        await deleteTeam(data)
        setIsOpen(false)
        window.location.reload;
      }, [deleteTeam, data]);

      const onCancel = useCallback(() => {
        setIsOpen(false)
      }, []);

      const columns = useMemo<Column<TeamResult>[]>(
        () => [
          {
            name: "action",
            label: t("Edit"),
            onClick: onTeamClick,
            buttonIcon: <EditNote />,
          },
          { name: "name", label: t("Name") },
          { name: "code", label: t("Code") },
          { name: "description", label: t("description") },
          {
            name: "action",
            label: t("Delete"),
            onClick: onDeleteClick,
            buttonIcon: <DeleteIcon />,
          },
        ],
        [t],
      );

  return (
  <>
  <SearchBox
        criteria={searchCriteria}
        onSearch={(query) => { 
        //   setFilteredStaff(
        //     staff.filter(
        //       (s) => 
        //       s.staffId.toLowerCase().includes(query.staffId.toLowerCase()) && 
        //       s.name.toLowerCase().includes(query.name.toLowerCase())
        //       // (query.team === "All" || s.team === query.team) &&
        //       // (query.category === "All" || s.category === query.category) &&
        //       // (query.team === "All" || s.team === query.team),
        //     )
        //   )
        }}
      />
      <SearchResults<TeamResult> items={filteredTeam} columns={columns} />
      <ConfirmModal
        isOpen={isOpen}
        onConfirm={onConfirm}
        onCancel={onCancel}
      />

  </>
  );
};
export default TeamSearch;