import React from "react";
import {Permission} from "@/interfaces/permissions";
import {createColumnHelper, flexRender, getCoreRowModel, useReactTable, Row} from "@tanstack/react-table";
import Link from "next/link";
import {convertCamelCaseToReadable} from "@/utils/string";

interface Props {
	permissions: Permission[];
}

const columnHelper = createColumnHelper<Permission>();

const defaultColumns = [
	columnHelper.accessor("type", {
		header: () => <span>Type</span>,
		cell: ({row, getValue}) => (
			<Link
				href={`/permissions/${row.original.id}`}
				key={row.id}
				className="underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer">
				{convertCamelCaseToReadable(getValue() as string)}
			</Link>
		),
	}),
];

export default function PermissionList({permissions}: Props) {
	const table = useReactTable({
		data: permissions,
		columns: defaultColumns,
		getCoreRowModel: getCoreRowModel(),
	});

	const groupedData: {[key: string]: Row<Permission>[]} = table.getRowModel().rows.reduce((groups: {[key: string]: Row<Permission>[]}, row) => {
		const parent = row.original.topic;
		if (!groups[parent]) {
			groups[parent] = [];
		}
		groups[parent].push(row);
		return groups;
	}, {});

	return (
		<div className="w-full h-full">
			<div className="w-full flex flex-col gap-2">
				<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
					<thead>
						{table.getHeaderGroups().map((headerGroup) => (
							<tr key={headerGroup.id}>
								{headerGroup.headers.map((header) => (
									<th className="py-4 px-4 text-left" key={header.id}>
										{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
									</th>
								))}
							</tr>
						))}
					</thead>
					<tbody className="px-2">
						{Object.keys(groupedData).map((parent) => (
							<React.Fragment key={parent}>
								<tr>
									<td className="px-2 py-2 items-center w-fit">
										<strong>{parent}</strong>
									</td>
								</tr>
								{groupedData[parent].map((row, i) => (
									<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
										{row.getVisibleCells().map((cell) => (
											<td className="px-4 py-2 items-center w-fit" key={cell.id}>
												{flexRender(cell.column.columnDef.cell, cell.getContext())}
											</td>
										))}
									</tr>
								))}
							</React.Fragment>
						))}
					</tbody>
				</table>
			</div>
		</div>
	);
}