'use client';
import {
  ColumnDef,
  SortingState,
  flexRender,
  getCoreRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  useReactTable,
  filterFns,
  FilterFnOption
} from "@tanstack/react-table";

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

import {
  Pagination,
  PaginationNext,
  PaginationPrevious,
  PaginationItem,
  PaginationLink,
  PaginationContent,
  PaginationEllipsis,
} from "@/components/ui/pagination";
import { Button } from "./button";
import { ChangeEvent, useEffect, useState } from "react";
import React from "react";
import moment from "moment";
import { Account } from "@prisma/client";
import { formatMoney } from "@/lib/clientUtils";
import { GetInvoicePayload } from "@/lib/types";

interface DataTableProps<TData, TValue> {
  columns: ColumnDef<TData, TValue>[];
  data: TData[];
}
function DebouncedInput({
  value: initialValue,
  onChange,
  debounce = 500,
  ...props
}: {
  value: string | number
  onChange: (value: string | number) => void
  debounce?: number
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'>) {
  const [value, setValue] = React.useState(initialValue)

  React.useEffect(() => {
    setValue(initialValue)
  }, [initialValue])

  React.useEffect(() => {
    const timeout = setTimeout(() => {
      onChange(value)
    }, debounce)

    return () => clearTimeout(timeout)
  }, [value])

  return (
    <input type="text" {...props} value={value} onChange={e => setValue(e.target.value)} />
  )
}

export function DataTable<TData, TValue>({
  columns,
  data,
}: DataTableProps<TData, TValue>) {
  const [pageSize, setStatePageSize] = useState(50);
  const [sorting, setSorting] = useState<SortingState>([])
  const [globalFilter, setGlobalFilter] = useState('')
  const newCols = React.useMemo<ColumnDef<GetInvoicePayload, any>[]>(
    () => [
      {
        accessorKey: 'invoiceAmount',
        cell: (info) => {
          return <div>{info.getValue()}</div>;
        },
      }
    ],
    []
  );
  const table = useReactTable({
    initialState: {
      pagination: {
        pageSize
      },
      globalFilter
    },
    state: {
      sorting,
      globalFilter,
    },
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    onGlobalFilterChange: setGlobalFilter,
    globalFilterFn: filterFns.includesString,
    onSortingChange: setSorting,
    getSortedRowModel: getSortedRowModel(),
    debugTable: true,
    debugHeaders: true,
    debugColumns: true
  });

  const handlePageSizeChange = (e: ChangeEvent<HTMLSelectElement>) => {
    const newSize = Number(e.target.value);
    table.setPageSize(newSize); // Update the table pagination size
    setStatePageSize(newSize);  // Update local state for select value
  };

  return (
    <div className="grid grid-cols-1">
      <div>
        {JSON.stringify(
          {

            globalFilter: table.getState().globalFilter
          },
          null,
          2
        )}
        <DebouncedInput
          value={globalFilter ?? ''}
          onChange={(value) => setGlobalFilter(String(value))}
          className="p-2 font-lg shadow border border-block"
          placeholder="Search all columns..."
        />
      </div>
      <div className="rounded-md border">
        <Table>
          <TableHeader>
            {table.getHeaderGroups().map((headerGroup) => (
              <TableRow key={headerGroup.id}>
                {headerGroup.headers.map((header) => (
                  <TableHead key={header.id}>
                    {header.isPlaceholder
                      ? null
                      : flexRender(
                        header.column.columnDef.header,
                        header.getContext()
                      )}
                  </TableHead>
                ))}
              </TableRow>
            ))}
          </TableHeader>
          <TableBody>
            {table.getRowModel().rows?.length ? (
              table.getRowModel().rows.map((row) => (
                <TableRow
                  key={row.id}
                  data-state={row.getIsSelected() && "selected"}
                >
                  {row.getVisibleCells().map((cell) => (
                    <TableCell key={cell.id}>
                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
                    </TableCell>
                  ))}
                </TableRow>
              ))
            ) : (
              <TableRow>
                <TableCell colSpan={columns.length} className="h-24 text-center">
                  No results.
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>

      <div className="flex justify-end py-2 text-white gap-4 w-full">
        <div className="flex items-center gap-8">
          <div className="flex items-center gap-1 w-full">
            <label htmlFor="page-size" className="text-nowrap">Rows per page: </label>
            <select
              id="page-size"
              value={pageSize} // This controls the displayed value of the select
              onChange={handlePageSizeChange}
              className="border rounded-md p-2  !w-16"
            >
              <option value={5}>5</option>
              <option value={10}>10</option>
              <option value={25}>25</option>
              <option value={50}>50</option>
            </select>
          </div>
          <div className="text-nowrap">Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}</div>

          <Pagination>
            <PaginationContent>
              {/* Previous Page Button */}

              {<PaginationItem>
                <PaginationPrevious
                  isActive={table.getCanPreviousPage()}
                  onClick={() => table.previousPage()}
                />
              </PaginationItem>}


              {/* Next Page Button */}
              {<PaginationItem>
                <PaginationNext
                  isActive={table.getCanNextPage()}
                  onClick={() => table.nextPage()}
                />
              </PaginationItem>}

            </PaginationContent>
          </Pagination>
        </div>

      </div>



    </div>
  );
}