import { useSuspenseQuery } from "@tanstack/react-query";
import { createColumnHelper } from "@tanstack/react-table";
import axios from "axios";
import { Trash } from "lucide-react";
import { toast } from "sonner";
import type { Notifications } from "../../../../types/notifications";
import { Button } from "../../../components/ui/button";
import { Card, CardContent, CardHeader } from "../../../components/ui/card";
import {
	Tooltip,
	TooltipContent,
	TooltipTrigger,
} from "../../../components/ui/tooltip";
import { notificationSubs } from "../../../lib/queries/notificationSubs";
import { notifications } from "../../../lib/queries/notifications";
import LstTable from "../../../lib/tableStuff/LstTable";
import SearchableHeader from "../../../lib/tableStuff/SearchableHeader";

export default function NotificationsTable({ userId }: any) {
	const { data: subs, refetch } = useSuspenseQuery(notificationSubs(userId));
	const { data: note } = useSuspenseQuery(notifications());
	const columnHelper = createColumnHelper<Notifications>();

	// filter out the current
	const notificationMap = Object.fromEntries(note.map((n: any) => [n.id, n]));

	const data = subs.map((sub: any) => ({
		...sub,
		name: notificationMap[sub.notificationId].name || null,
		description: notificationMap[sub.notificationId].description || null,
		emails: sub.emails ? sub.emails.join(",") : null,
	}));

	const removeNotification = async (ns: any) => {
		try {
			const res = await axios.delete(`/lst/api/notification/sub`, {
				withCredentials: true,
				data: {
					userId: ns.userId,
					notificationId: ns.notificationId,
				},
			});

			if (res.data.success) {
				toast.success(`Subscription removed`);
				refetch();
			} else {
				console.info(res);
				toast.error(res.data.message);
			}
		} catch {
			toast.error(`There was an error removing subscription.`);
		}
	};

	const column = [
		columnHelper.accessor("name", {
			header: ({ column }) => (
				<SearchableHeader column={column} title="Name" searchable={true} />
			),
			filterFn: "includesString",
			cell: (i) => i.getValue(),
		}),
		columnHelper.accessor("description", {
			header: ({ column }) => (
				<SearchableHeader column={column} title="Description" />
			),
			cell: (i) => (
				<Tooltip>
					<TooltipTrigger>
						{i.getValue()?.length > 25 ? (
							<span>{i.getValue().slice(0, 25)}...</span>
						) : (
							<span>{i.getValue()}</span>
						)}
					</TooltipTrigger>
					<TooltipContent>{i.getValue()}</TooltipContent>
				</Tooltip>
			),
		}),
		columnHelper.accessor("emails", {
			header: ({ column }) => (
				<SearchableHeader column={column} title="Emails" searchable={true} />
			),
			filterFn: "includesString",
			cell: (i) => i.getValue(),
		}),
		columnHelper.accessor("remove", {
			header: ({ column }) => (
				<SearchableHeader column={column} title="Remove" searchable={false} />
			),
			filterFn: "includesString",
			cell: (i) => {
				return (
					<Button
						size="icon"
						variant={"destructive"}
						onClick={() => removeNotification(i.row.original)}
					>
						<Trash />
					</Button>
				);
			},
		}),
	];
	return (
		<Card>
			<CardHeader className="text-center">Subscriptions</CardHeader>
			<CardContent>
				<LstTable data={data} columns={column} />
			</CardContent>
		</Card>
	);
}