import { Table } from "@tanstack/react-table";

//import { priorities, statuses } from './Data'
import { DataTableFilterField, useDataTableContext } from "@/lib/hooks";
import { cn } from "@/lib/utils";
import { Button, Input } from "@/ui";
import { t } from "i18next";
import { SearchIcon, XIcon } from "lucide-react";
import { ChangeEvent } from "react";
import { DataTableColumnOptions } from "./DataTableColumnOptions";

interface DataTableToolbarProps<TData> extends React.HTMLAttributes<HTMLDivElement> {
  table: Table<TData>;
  filterFields?: DataTableFilterField<TData>[];
}

export function DataTableToolbar<TData>({
  table,
  className,
  children,
  ...props
}: DataTableToolbarProps<TData>) {
  const { globalFilter, isFiltered, setGlobalFilter, resetGlobalFilter } = useDataTableContext();

  const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {
    const value = String(event.target.value);
    if (value === "") {
      resetGlobalFilter();
    } else {
      setGlobalFilter([value]);
    }
  };

  return (
    <div
      className={cn(
        "flex w-full items-center justify-between space-x-2 overflow-auto p-1",
        className
      )}
      {...props}
    >
      <div className='flex items-center flex-1 space-x-2'>
        <SearchIcon className='w-4 h-4 text-gray-500' />
        <Input
          key='global-filter'
          placeholder={t("common.filter.input_placeholder")}
          value={globalFilter}
          onChange={handleOnChange}
          className={cn("h-8 w-full transition-all")}
        />

        {isFiltered && (
          <Button
            variant='outline'
            onClick={() => resetGlobalFilter()}
            className='h-8 px-2 transition-all lg:px-3'
          >
            <XIcon className='w-4 h-4 mr-2' />
            {t("common.filter.reset_filter")}
          </Button>
        )}
      </div>
      <div className='flex items-center gap-2'>
        {children}
        {table.options.enableHiding && <DataTableColumnOptions table={table} />}
      </div>
    </div>
  );
}
