"use client"

import * as React from "react"
import type {
  DataTableAdvancedFilterField,
  DataTableFilterField,
} from "@/types/table"

import { useDataTable } from "@/hooks/use-data-table"
import { DataTable } from "@/components/data-table/data-table"
import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"
import { getColumns, type EDPVendorRow } from "./edp-progress-table-columns"
import { EDPProgressTableToolbarActions } from "./edp-progress-table-toolbar-actions"

interface Props {
  promises: Promise<[
    { data: EDPVendorRow[]; pageCount: number },
  ]>
}

export function EDPProgressTable({ promises }: Props) {
  const columns = React.useMemo(() => getColumns(), [])

  const [{ data, pageCount }] = React.use(promises)

  const filterFields: DataTableFilterField<EDPVendorRow>[] = []
  const advancedFilterFields: DataTableAdvancedFilterField<EDPVendorRow>[] = [
    { id: "vendorName", label: "Vendor Name", type: "text" },
    { id: "totalTags", label: "Tags", type: "number" },
    { id: "totalForms", label: "Forms", type: "number" },
    { id: "completionPercentage", label: "Completion %", type: "number" },
  ]

  const { table } = useDataTable({
    data,
    columns,
    pageCount,
    filterFields,
    enablePinning: true,
    enableAdvancedFilter: true,
    initialState: {
      sorting: [{ id: "completionPercentage", desc: true }],
      columnPinning: { left: ["select"], right: [] },
    },
    getRowId: (row) => String(row.vendorId),
    shallow: false,
    clearOnDefault: true,
  })

  return (
    <DataTable table={table}>
      <DataTableAdvancedToolbar
        table={table}
        filterFields={advancedFilterFields}
        shallow={false}
      >
        <EDPProgressTableToolbarActions />
      </DataTableAdvancedToolbar>
    </DataTable>
  )
}