// * Packages
import { Delete } from "lucide-react";
import { router, useForm } from "@inertiajs/react";
import { FormEvent } from "react";
import { route } from "ziggy-js";
// * Components shadcn
import { Button } from "@/components/ui/button";
import {
    Tooltip,
    TooltipContent,
    TooltipTrigger,
} from "@/components/ui/tooltip";
// * Other
import SimpleInput from "@/back/Components/Inputs/SimpleInput";
import useTrans from "@/hooks/use-translations";

export default function DataTableSearch({
    modelName,
    searchText,
    searchFields,
}: {
    modelName: string;
    searchText: string;
    searchFields: string;
}) {
    const url = new URL(window.location.href);
    const { get, setData, data } = useForm({
        search: searchText,
    });
    const submit = (e: FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        get(route(`back.${modelName}.index`));
    };
    return (
        <form onSubmit={submit} className="flex justify-between items-end mb-4">
            <SimpleInput
                name="search"
                label={useTrans("back.table_search", {
                    searchFields,
                })}
                placeholder="ex: John Doe"
                value={data.search}
                wordCounter={false}
                setData={setData}
                className="w-[calc(100%-40px-0.5rem)]"
            />
            <Tooltip>
                <TooltipTrigger asChild>
                    <Button
                        type="button"
                        variant="destructive"
                        size="icon"
                        className="ml-2"
                        onClick={() => router.visit(url.origin + url.pathname)}
                    >
                        <Delete />
                    </Button>
                </TooltipTrigger>
                <TooltipContent>
                    <p>{useTrans("back.table_search_reset")}</p>
                </TooltipContent>
            </Tooltip>
        </form>
    );
}