import React from "react";
import { useTranslations } from "next-intl";
import { flexRender } from "@tanstack/react-table";
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow
} from "@/components/ui/table";
import { DatasetRowContext } from "@/components/ui/dataset/dataset-row-provider";
import { useDataset, DatasetItem } from "@/components/ui/dataset/dataset-provider";
import { DatasetViewTableHeader } from "@/components/ui/dataset/dataset-view-table-header";

export const DatasetViewTable = <T extends DatasetItem = DatasetItem>() => {
    const t = useTranslations("dashboard.general.dataset");
    const { table } = useDataset<T>();

    const rows = table.getRowModel().rows;

    return (
        <Table
          containerClass="rounded-md border flex flex-row min-w-0"
          className="min-w-0 flex-1">
            <TableHeader>
                {table.getHeaderGroups().map((headerGroup) => {
                    return (
                        <TableRow key={headerGroup.id}>
                            {headerGroup.headers.map((header) => {
                                return (
                                    <TableHead key={header.id} colSpan={header.colSpan}>
                                        {!header.isPlaceholder && (
                                            <DatasetViewTableHeader header={header} />
                                        )}
                                    </TableHead>
                                );
                            })}
                        </TableRow>
                    );
                })}
            </TableHeader>

            <TableBody>
                {rows.length === 0 && (
                    <TableRow>
                        <TableCell
                          className='h-24 text-center'
                          colSpan={999}>
                            {t("noResults")}
                        </TableCell>
                    </TableRow>
                )}

                {rows.map((row) => {
                    return (
                        <TableRow
                          key={row.id}>
                            <DatasetRowContext
                              value={{
                                row: row.original
                              }}>
                                {row.getVisibleCells().map((cell) => {
                                    return (
                                        <TableCell
                                          key={cell.id}>
                                            {flexRender(
                                                cell.column.columnDef.cell,
                                                cell.getContext()
                                            )}
                                        </TableCell>
                                    );
                                })}
                            </DatasetRowContext>
                        </TableRow>
                    );
                })}
            </TableBody>
        </Table>
    );
};