import { Trash2 } from "lucide-react";
import toast from "react-hot-toast";
import { BasicAnnuncioCard } from "~/components/servizio/annuncio_card";
import {
	Accordion,
	AccordionContent,
	AccordionItem,
	AccordionTrigger,
} from "~/components/ui/accordion";
import { Button } from "~/components/ui/button";
import type { UsersId } from "~/schemas/public/Users";
import { api } from "~/utils/api";

export const AnnunciRichiesti = ({ userId }: { userId: UsersId }) => {
	const { data, isLoading } = api.intrests.getUserInterestsAnnunci.useQuery({
		userId,
	});

	const utils = api.useUtils();
	const { mutate: deleteAnnuncio } = api.intrests.removeIntrest.useMutation({
		onSuccess: async () => {
			await utils.intrests.getUserInterestsAnnunci.invalidate({ userId });
			toast.success("Annuncio rimosso con successo");
		},
	});
	if (isLoading) return <div>Loading...</div>;

	if (!data || data.length === 0) return null;

	return (
		<Accordion collapsible type="single">
			<AccordionItem className="space-y-4" value="compatibili">
				<AccordionTrigger className="cursor-pointer rounded-md border-2 border-pink-500 bg-muted p-2">
					Annunci Richiesti dall'Utente ({data.length}):
				</AccordionTrigger>
				<AccordionContent>
					<div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
						{data.map((a) => {
							return (
								<BasicAnnuncioCard
									className="w-full border-2 border-pink-500"
									data={a}
									interactions={
										<Button
											onClick={() => {
												deleteAnnuncio({ annuncioId: a.id, userId });
											}}
											variant="destructive"
										>
											Rimuovi
											<Trash2 className="size-4" />
										</Button>
									}
									key={a.id}
								/>
							);
						})}
						{data.length % 2 === 1 && (
							<div className="size-full rounded-md border border-(--pattern-fg) bg-[repeating-linear-gradient(45deg,var(--pattern-fg)_0,var(--pattern-fg)_1px,transparent_0,transparent_50%)] bg-size-[10px_10px] bg-fixed opacity-10 [--pattern-fg:#696969] dark:[--pattern-fg:#e1e1e1]" />
						)}
					</div>
				</AccordionContent>
			</AccordionItem>
		</Accordion>
	);
};
