import { useSuspenseQuery } from "@tanstack/react-query";
import axios from "axios";
import { toast } from "sonner";
import {
	Card,
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
} from "../../../components/ui/card";
import { useAppForm } from "../../../lib/formSutff";
import { notificationSubs } from "../../../lib/queries/notificationSubs";
import { notifications } from "../../../lib/queries/notifications";

export default function NotificationsSubCard({ user }: any) {
	const { data } = useSuspenseQuery(notifications());
	const { refetch } = useSuspenseQuery(notificationSubs(user.id));
	const form = useAppForm({
		defaultValues: {
			notificationId: "",
			emails: [user.email],
		},
		onSubmit: async ({ value }) => {
			if (value.notificationId === "") {
				toast.error("Please select a notification before trying to subscribe.");
				return;
			}
			const postD = { ...value, userId: user.id };

			try {
				const res = await axios.post("/lst/api/notification/sub", postD, {
					withCredentials: true,
				});

				if (res.status === 200) {
					toast.success("Notification Subbed");
					refetch();
					form.reset();
				}
			} catch (error) {
				console.error(error);
			}
		},
	});

	let n: any = [];
	if (data) {
		n = data
			.filter((n: any) => n.active)
			.map((i: any) => ({
				label: i.name,
				value: i.id,
			}));
	}

	return (
		<div>
			<Card className="p-3 w-lg">
				<CardHeader>
					<CardTitle>Notifications</CardTitle>
					<CardDescription>
						All currently active notifications you can subscribe to. selecting a
						notification will give you a brief description on how it works
					</CardDescription>
				</CardHeader>
				<CardContent>
					<form
						onSubmit={(e) => {
							e.preventDefault();
							form.handleSubmit();
						}}
					>
						<div>
							<form.AppField name="notificationId">
								{(field) => (
									<field.SelectField
										label="Notifications"
										placeholder="Select Notification"
										options={n}
									/>
								)}
							</form.AppField>
						</div>

						<form.AppField name="emails" mode="array">
							{(field) => (
								<field.DynamicInputField
									label="Notification Emails"
									description="Add more email addresses for notification delivery."
									inputType="email"
									addLabel="Add Email"
									//initialValue={session?.user.email}
								/>
							)}
						</form.AppField>
						<div className="flex justify-end mt-6">
							<form.AppForm>
								<form.SubmitButton>Subscribe</form.SubmitButton>
							</form.AppForm>
						</div>
					</form>
				</CardContent>
			</Card>
		</div>
	);
}