import {
	type ColumnDef,
	flexRender,
	getCoreRowModel,
	getPaginationRowModel,
	useReactTable,
} from "@tanstack/react-table";

import { useState } from "react";
import { Button } from "../../../../../../../components/ui/button";
import { ScrollArea } from "../../../../../../../components/ui/scroll-area";
import {
	Select,
	SelectContent,
	SelectGroup,
	SelectItem,
	SelectLabel,
	SelectTrigger,
	SelectValue,
} from "../../../../../../../components/ui/select";
import {
	Table,
	TableBody,
	TableCell,
	TableHead,
	TableHeader,
	TableRow,
} from "../../../../../../../components/ui/table";
import { LstCard } from "../../../../-components/extendedUi/LstCard";

interface DataTableProps<TData, TValue> {
	columns: ColumnDef<TData, TValue>[];
	data: TData[];
	//style: any;
}

export function LabelTable<TData, TValue>({
	columns,
	data,
	//style,
}: DataTableProps<TData, TValue>) {
	const [pagination, setPagination] = useState({
		pageIndex: 0, //initial page index
		pageSize: 5, //default page size
	});
	const table = useReactTable({
		data,
		columns,
		getCoreRowModel: getCoreRowModel(),
		getPaginationRowModel: getPaginationRowModel(),
		onPaginationChange: setPagination,
		state: {
			//...
			pagination,
		},
	});

	//console.log(parseInt(style.height.replace("px", "")) - 50);
	return (
		<LstCard>
			<div>
				<div className="flex flex-row justify-between">
					{data.length === 0 ? (
						<span>No labels have been printed in the last 2 hours</span>
					) : (
						<span>Labels for the last 2 hours</span>
					)}
					<Select
						value={pagination.pageSize.toString()}
						onValueChange={(e) =>
							setPagination({
								...pagination,
								pageSize: parseInt(e),
							})
						}
					>
						<SelectTrigger className="w-[180px]">
							<SelectValue
								//id={field.name}
								placeholder="Select Page"
							/>
						</SelectTrigger>
						<SelectContent>
							<SelectGroup>
								<SelectLabel>Page Size</SelectLabel>
								<SelectItem value="5">5</SelectItem>
								<SelectItem value="10">10</SelectItem>
								<SelectItem value="50">50</SelectItem>
								<SelectItem value="100">100</SelectItem>
							</SelectGroup>
						</SelectContent>
					</Select>
				</div>
				<ScrollArea className="h-72 rounded-md border m-2">
					<Table
					// style={{
					//     width: `${parseInt(style.width.replace("px", "")) - 50}px`,
					//     height: `${parseInt(style.height.replace("px", "")) - 200}px`,
					//     cursor: "move",
					// }}
					>
						<TableHeader>
							{table.getHeaderGroups().map((headerGroup) => (
								<TableRow key={headerGroup.id}>
									{headerGroup.headers.map((header) => {
										return (
											<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 labels.
									</TableCell>
								</TableRow>
							)}
						</TableBody>
					</Table>
				</ScrollArea>
			</div>
			<div className="flex items-center justify-end space-x-2">
				<Button
					variant="outline"
					size="sm"
					onClick={() => table.previousPage()}
					disabled={!table.getCanPreviousPage()}
				>
					Previous
				</Button>
				<Button
					variant="outline"
					size="sm"
					onClick={() => table.nextPage()}
					disabled={!table.getCanNextPage()}
				>
					Next
				</Button>
			</div>
		</LstCard>
	);
}
