ldc-ovoteam/resources/ts/back/Components/Table/DataTableSearch.tsx

import { DeleteIcon } from "lucide-react";
import { type ReactNode, type SubmitEvent, useState } from "react";

import BtnOptionnalLinkWithTooltip from "@/back/Components/BtnOptionnalLinkWithTooltip";
import InputError from "@/back/Components/InputError";
import SimpleString from "@/back/Components/Inputs/SimpleString";
import AddFilterToUrl from "@/back/lib/filters";
import trans from "@/hooks/use-translations";

interface DataTableSearchProps {
  modelRoute: string;
  prefixRoute: string;
  searchFields: string;
  isArchiveRoute?: boolean;
  children?: ReactNode;
}

export default function DataTableSearch({
  modelRoute,
  prefixRoute,
  searchFields,
  isArchiveRoute = false,
  children,
}: DataTableSearchProps) {
  const routeSearch = route().params.search;
  const [search, setSearch] = useState<string | null>(routeSearch);

  const submit = (e: SubmitEvent) => {
    if (!search) return;
    e.preventDefault();
    const params = {
      ...route().params,
      search,
    };
    AddFilterToUrl({
      modelRoute: modelRoute,
      prefixRoute: prefixRoute,
      params,
      isArchiveRoute,
    });
  };
  const onDeleteSearch = () => {
    setSearch(null);
    const params = {
      ...route().params,
      search: undefined,
    };
    AddFilterToUrl({
      modelRoute: modelRoute,
      prefixRoute: prefixRoute,
      params,
      isArchiveRoute,
    });
  };
  return (
    <>
      <form
        onSubmit={submit}
        className="flex justify-between items-end gap-2 mb-4"
      >
        <SimpleString
          name="search"
          label={trans("uwil-backend::back.table_search", {
            params: { searchFields },
          })}
          placeholder="ex: John Doe"
          value={search ?? undefined}
          wordCounter={false}
          setData={(name, value) => {
            setSearch(value);
          }}
          className="w-[calc(100%-40px-0.5rem)]"
        />
        {children}
        <BtnOptionnalLinkWithTooltip
          content={<DeleteIcon />}
          tooltipContent={
            <p>{trans("uwil-backend::back.table_search_reset")}</p>
          }
          type="button"
          variant="destructive"
          onClick={onDeleteSearch}
        />
      </form>
      <InputError all />
    </>
  );
}