import InputSearch from "~/components/ui/input/InputSearch";
import type { ApiEndpointDto } from "../dtos/ApiEndpointDto";
import { useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import EmptyState from "~/components/ui/emptyState/EmptyState";
import ApiEndpoint from "./ApiEndpoint";

export default function ApiEndpointsTable({ items }: { items: ApiEndpointDto[] }) {
  const { t } = useTranslation();
  const [searchInput, setSearchInput] = useState("");
  const filteredItems = useMemo(() => {
    const normalizedSearch = searchInput.trim().toLowerCase();
    if (!normalizedSearch) return items;
    return items.filter((f) => {
      return (
        f.route.toLowerCase().includes(normalizedSearch) ||
        f.method.toLowerCase().includes(normalizedSearch) ||
        f.description.toLowerCase().includes(normalizedSearch) ||
        f.entity.name.toLowerCase().includes(normalizedSearch) ||
        f.entity.title.toLowerCase().includes(normalizedSearch) ||
        f.entity.titlePlural.toLowerCase().includes(normalizedSearch) ||
        t(f.entity.title).toLowerCase().includes(normalizedSearch) ||
        t(f.entity.titlePlural).toLowerCase().includes(normalizedSearch)
      );
    });
  }, [items, searchInput, t]);

  return (
    <div className="space-y-2">
      <InputSearch value={searchInput} setValue={setSearchInput} />
      {filteredItems.length === 0 && (
        <EmptyState
          captions={{
            thereAreNo: t("api.endpoints.empty"),
          }}
        />
      )}
      {filteredItems.map((endpoint, idx) => {
        return <ApiEndpoint key={idx} item={endpoint} />;
      })}
    </div>
  );
}