'use client';

import { Table } from '@tanstack/react-table';
import { Column } from './tanstackTable';

import { TanstackTableFacetedFilter } from './tanstack-table-faceted-filter';
import { Button } from '../button';
import { TextField } from '../text-field';
import { Input } from '../input';
import { commonColors } from '@trail-ui/theme';
import { SearchIcon } from '@trail-ui/icons';
import { useState } from 'react';

interface DataTableToolbarProps<TData> {
  table: Table<TData>;
  data: TData[];
  columns: Column[];
  openFilter: boolean;
  selectedFilterValues: Map<string, Set<unknown>>;
  setSelectedFilterValues: (values: Map<string, Set<any>>) => void;
}

export function TanstackTableToolBar<TData>({
  table,
  data,
  columns,
  openFilter,
  selectedFilterValues,
  setSelectedFilterValues,
}: DataTableToolbarProps<TData>) {
  const isFiltered = table.getState().columnFilters.length > 0;
  //   const [selectedFilterValues, setSelectedFilterValues] = useState(new Map<string, Set<string>>());

  const getUniqueValues = <TData extends Record<string, unknown>>(
    data: TData[] | any[],
    columnId: string,
  ) => {
    const uniqueValues = new Set<string>();
    data.forEach((row) => uniqueValues.add(row[columnId] as string));
    return Array.from(uniqueValues).map((value) => ({ label: value, value }));
  };

  const filterColumns = columns.filter((column) => column.filterFn === 'multiSelectFilter');

  const [filterSearch, setFilterSearch] = useState<string>('');

  const updatedSearchFilter = filterColumns.filter((column) =>
    column.name.toLowerCase().includes(filterSearch.toLowerCase()),
  );

  const applyFilters = () => {
    selectedFilterValues.forEach((values, columnId) => {
      const column = table.getColumn(columnId);
      if (column) {
        column.setFilterValue(values.size > 0 ? Array.from(values) : undefined);
      }
    });
  };

  return (
    <div className="flex flex-col items-center justify-between">
      <div className="flex items-center">
        <div className="flex max-h-[600px] w-[360px] flex-col justify-between overflow-auto rounded border border-neutral-200 bg-neutral-50 shadow-sm">
          <div>
            <TextField
              classNames={{
                base: 'filter-input ml-3 sticky top-0 bg-neutral-50 z-20',
                description: 'test',
              }}
            >
              <Input
                classNames={{
                  base: 'border-t-0 border-r-0 border-l-0 rounded-none border-b-neutral-200 p-0 h-[45px] hover:p-2 hover:!border-t-0 hover:!border-r-0 hover:!border-l-0  hover:!border-b-[2px]  data-[focused=true]:p-2 data-[focused=true]:!border-r-0 data-[focused=true]:!border-l-0 data-[focused=true]:!border-t-0',
                }}
                type="text"
                placeholder="Search"
                value={filterSearch}
                onChange={(e) => setFilterSearch(e.target.value)}
                startContent={
                  <SearchIcon width={16} height={16} color={commonColors.neutral[600]} />
                }
              />
            </TextField>

            {updatedSearchFilter.length > 0 ? (
              updatedSearchFilter.map((column) => (
                <TanstackTableFacetedFilter
                  key={column.id}
                  openFilter={openFilter}
                  column={table.getColumn(column.id)}
                  title={column.name}
                  options={getUniqueValues(data, column.id)}
                  selectedFilterValues={selectedFilterValues.get(column.id) || new Set()}
                  setSelectedFilterValues={(values: any) => {
                    setSelectedFilterValues(new Map(selectedFilterValues).set(column.id, values));
                  }}
                />
              ))
            ) : (
              <p className="p-4 text-center text-sm text-neutral-900">No Results Found</p>
            )}
          </div>
          <div className="flex w-full justify-end gap-3 border-t border-t-neutral-200 bg-neutral-100 px-4 py-3">
            <Button
              appearance="transparent"
              isDisabled={!isFiltered}
              onPress={() => {
                table.resetColumnFilters();
                setSelectedFilterValues(new Map());
              }}
              className={`${!isFiltered ? 'opacity-50' : ''} h-8 !bg-neutral-100 px-2 lg:px-3`}
            >
              Clear
            </Button>

            <Button
              className={`${selectedFilterValues.size < 1 ? '!bg-neutral-200 opacity-50' : ''}`}
              isDisabled={selectedFilterValues.size < 1}
              onPress={applyFilters}
              appearance="primary"
            >
              Apply
            </Button>
          </div>
        </div>
      </div>
      {/* <DataTableViewOptions table={table} /> */}
    </div>
  );
}