// * Packages
import { DeleteIcon } from "lucide-react";
import { router, useForm } from "@inertiajs/react";
import { FormEvent, ReactNode } from "react";
import { route } from "ziggy-js";
// * Other
import SimpleString from "@/back/Components/Inputs/SimpleString";
import useTrans from "@/hooks/use-translations";
import BtnOptionnalLinkWithTooltip from "../BtnOptionnalLinkWithTooltip";

type DataTableSearchProps = {
    modelRoute: string;
    searchText: string;
    searchFields: string;
    children?: ReactNode;
};

export default function DataTableSearch({
    modelRoute,
    searchText,
    searchFields,
    children,
}: DataTableSearchProps) {
    const url = new URL(window.location.href);
    const { get, setData, data } = useForm({
        search: searchText,
    });
    const submit = (e: FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        get(route(`back.${modelRoute}.index`));
    };
    return (
        <form onSubmit={submit} className="flex justify-between items-end gap-2 mb-4">
            <SimpleString
                name="search"
                label={useTrans("back.table_search", {
                    params: { searchFields },
                })}
                placeholder="ex: John Doe"
                value={data.search}
                wordCounter={false}
                setData={setData}
                className="w-[calc(100%-40px-0.5rem)]"
            />
            {children}
            <BtnOptionnalLinkWithTooltip
                content={<DeleteIcon />}
                tooltipContent={<p>{useTrans("back.table_search_reset")}</p>}
                type="button"
                variant="destructive"
                onClick={() => router.visit(url.origin + url.pathname)}
            />
        </form>
    );
}