import { useSuspenseQuery } from "@tanstack/react-query";
import { createFileRoute, redirect } from "@tanstack/react-router";
import { createColumnHelper } from "@tanstack/react-table";
import { Suspense } from "react";
import { authClient } from "../../../lib/auth-client";
import { getArticleLinks } from "../../../lib/queries/getArticleLinks";
import LstTable from "../../../lib/tableStuff/LstTable";
import SearchableHeader from "../../../lib/tableStuff/SearchableHeader";
import SkellyTable from "../../../lib/tableStuff/SkellyTable";
import NewArticleLink from "./-components/NewArticleLink";

export const Route = createFileRoute("/transportation/opendock/")({
	beforeLoad: async ({ location }) => {
		const { data: session } = await authClient.getSession();
		//const allowedRole = ["systemAdmin", "admin", "manager"];

		const canAccess = await authClient.admin.hasPermission({
			permissions: {
				openDock: ["create"],
			},
		});

		if (!session?.user) {
			throw redirect({
				to: "/",
				search: {
					redirect: location.href,
				},
			});
		}

		//if (!allowedRole.includes(session.user.role as string)) {

		if (!canAccess) {
			throw redirect({
				to: "/",
			});
		}

		return { user: session.user };
	},
	component: RouteComponent,
});

const ArticleLinkTable = () => {
	const { data, refetch } = useSuspenseQuery(getArticleLinks());

	const columnHelper = createColumnHelper<any>();

	const columns = [
		columnHelper.accessor("av", {
			header: ({ column }) => (
				<SearchableHeader column={column} title="Article" searchable={true} />
			),
			filterFn: "includesString",
			cell: (i) => i.getValue(),
		}),
		columnHelper.accessor("description", {
			header: ({ column }) => (
				<SearchableHeader
					column={column}
					title="Description"
					searchable={true}
				/>
			),
			filterFn: "includesString",
			cell: (i) => i.getValue(),
		}),
		columnHelper.accessor("customer", {
			header: ({ column }) => (
				<SearchableHeader column={column} title="Customer" searchable={true} />
			),
			filterFn: "includesString",
			cell: (i) => (
				<span>
					{i.row.original.customer} - {i.row.original.customerDescription}
				</span>
			),
		}),
		columnHelper.accessor("loadType", {
			header: ({ column }) => (
				<SearchableHeader column={column} title="Load Type" searchable={true} />
			),
			filterFn: "includesString",
			cell: (i) => i.getValue(),
		}),
		columnHelper.accessor("dock", {
			header: ({ column }) => (
				<SearchableHeader column={column} title="Dock" searchable={true} />
			),
			filterFn: "includesString",
			cell: (i) => i.getValue(),
		}),
	];
	return (
		<div>
			<div>
				<div className="flex justify-end m-2">
					<Suspense
						fallback={
							<div>
								<p>Loading...</p>
							</div>
						}
					>
						<NewArticleLink refetch={refetch} />
					</Suspense>
				</div>
				<div>
					<LstTable data={data} columns={columns} pageSize={50} />
				</div>
			</div>
		</div>
	);
};
function RouteComponent() {
	return (
		<Suspense fallback={<SkellyTable />}>
			<ArticleLinkTable />
		</Suspense>
	);
}
