"use client";

import { TeamResult } from "@/app/api/team";
import SearchBox, { Criterion } from "../SearchBox";
import { useCallback, useEffect, 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 { useRouter } from "next/navigation";
import { deleteTeam } from "@/app/api/team/actions";
import { deleteDialog, successDialog } from "../Swal/CustomAlerts";
import { MAINTAIN_TEAM } from "@/middleware";

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

const TeamSearch: React.FC<Props> = ({ team, abilities }) => {
  const { t } = useTranslation();
  const [filteredTeam, setFilteredTeam] = useState(team);
  const router = useRouter();
  // translation
  const edit = t("edit")
  const name = t("name")
  const code = t("code")
  const description = t("description")
  const teamLead = t("teamLead")
  const delete_t = t("delete")

  const maintainTeam = abilities.includes(MAINTAIN_TEAM)

  const searchCriteria: Criterion<SearchParamNames>[] = useMemo(
    () => [
      {
        label: name,
        paramName: "name",
        type: "text",
      },
      {
        label: code,
        paramName: "code",
        type: "text",
      },
      {
        label: 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) => {
    deleteDialog(async () => {
      await deleteTeam(team.id);
      successDialog(t("Delete Success"), t);
    }, t);
  }, []);

  useEffect(() => {
    setFilteredTeam(team)
  }, [team]);

  const columns = useMemo<Column<TeamResult>[]>(
    () => [
      {
        name: "action",
        label: edit,
        onClick: onTeamClick,
        buttonIcon: <EditNote />,
        isHidden: !maintainTeam,
      },
      { name: "name", label: name },
      { name: "code", label: code },
      { name: "description", label: description },
      { name: "staffName", label: teamLead },
      {
        name: "action",
        label: delete_t,
        onClick: onDeleteClick,
        buttonIcon: <DeleteIcon />,
        color: "error",
        isHidden: !maintainTeam,
      },
    ],
    [t]
  );

  return (
    <>
      <SearchBox
        criteria={searchCriteria}
        onSearch={(query) => {
            setFilteredTeam(
              team.filter(
                (t) =>
                t.name.toLowerCase().includes(query.name.toLowerCase()) &&
                t.code.toLowerCase().includes(query.code.toLowerCase()) &&
                t.description.toLowerCase().includes(query.description.toLowerCase()) 
              )
            )
        }}
      />
      <SearchResults<TeamResult> items={filteredTeam} columns={columns} />
    </>
  );
};
export default TeamSearch;
