"use client";

import { Cross2Icon } from "@radix-ui/react-icons";
import { Table } from "@tanstack/react-table";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
// import { DataTableViewOptions } from "./components/data-table-view-options"

import { DataTableFacetedFilter } from "./data-table-faceted-filter";
import { DataTableViewOptions } from "./data-table-view-options";
import { userFilterLabels } from "@/constants/data";
import { Organization } from "@/types/organization";

interface DataTableToolbarProps<TData> {
  table: Table<TData>;
  data: Organization[];
}

export function DataTableToolbar<TData>({
  table,
  data,
}: DataTableToolbarProps<TData>) {
  const isFiltered = table.getState().columnFilters.length > 0;

  const industryFilterOptions = Array.from(
    new Set(data.map((d) => d.industry.toLocaleLowerCase()))
  ).map((v) => ({
    label: v.slice(0, 1).toLocaleUpperCase() + v.slice(1),
    value: v.slice(0, 1).toLocaleUpperCase() + v.slice(1),
  }));

  return (
    <div className="flex items-center justify-between">
      <div className="flex flex-1 items-center gap-2 flex-wrap">
        <Input
          placeholder="Search name..."
          value={(table.getColumn("name")?.getFilterValue() as string) ?? ""}
          onChange={(event: any) =>
            table.getColumn("name")?.setFilterValue(event.target.value)
          }
          className="h-8 w-[150px] lg:w-[250px]"
        />
        <Input
          placeholder="Search contact person..."
          value={
            (table.getColumn("contactPerson")?.getFilterValue() as string) ?? ""
          }
          onChange={(event: any) =>
            table.getColumn("contactPerson")?.setFilterValue(event.target.value)
          }
          className="h-8 w-[150px] lg:w-[250px]"
        />

        <Input
          placeholder="Search email..."
          value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
          onChange={(event: any) =>
            table.getColumn("email")?.setFilterValue(event.target.value)
          }
          className="h-8 w-[150px] lg:w-[250px]"
        />

        {table.getColumn("industry") && (
          <DataTableFacetedFilter
            column={table.getColumn("industry")}
            title="Industry"
            options={industryFilterOptions}
          />
        )}

        {isFiltered && (
          <Button
            variant="ghost"
            onClick={() => table.resetColumnFilters()}
            className="h-8 px-2 lg:px-3"
          >
            Reset
            <Cross2Icon className="ml-2 h-4 w-4" />
          </Button>
        )}
      </div>
      <DataTableViewOptions table={table} />
    </div>
  );
}