infoalloggi-monorepo/apps/infoalloggi/src/components/annunci_tutorial.tsx

"use client";
import { DialogTrigger } from "@radix-ui/react-dialog";
import { getCookie, setCookie } from "cookies-next/client";
import { add } from "date-fns";
import { ArrowRight, CircleHelp } from "lucide-react";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { Button } from "~/components/ui/button";
import {
	Dialog,
	DialogContent,
	DialogDescription,
	DialogHeader,
	DialogTitle,
} from "~/components/ui/dialog";
import { useTranslation } from "~/providers/I18nProvider";

const COOKIE_KEY = "tipologia_tutorial_shown";

export const CTA_TipologiaModal = () => {
	const { t } = useTranslation();
	const path = useRouter().asPath;
	const hasCookie = getCookie(COOKIE_KEY) === "true";

	const update = async (v: "Transitorio" | "Stabile" | null) => {
		setCookie(COOKIE_KEY, "true", {
			expires: add(new Date(), { days: 30 }), // Set cookie to expire in 30 days
		});
		if (v !== null) {
			window.location.assign(`/annunci?tipo=${v}`);
		}
		setOpen(false);
	};

	const [open, setOpen] = useState(false);

	useEffect(() => {
		if (path === "/annunci" && !hasCookie) {
			const timer = setTimeout(() => {
				setOpen(true);
			}, 1000); // 1 second delay
			return () => clearTimeout(timer);
		}
	}, [path, hasCookie]);

	return (
		<Dialog
			onOpenChange={async (v) => {
				setOpen(v);
				if (!v) {
					await update(null);
				}
			}}
			open={open}
		>
			<DialogTrigger asChild>
				<Button className="h-9">
					<CircleHelp />{" "}
					<span className="hidden sm:block">
						{t.tipologia_tutorial.btn_title}
					</span>
				</Button>
			</DialogTrigger>
			<DialogContent className="max-w-2xl">
				<DialogHeader>
					<DialogTitle className="text-2xl">
						{t.tipologia_tutorial.title}
					</DialogTitle>
					<DialogDescription className="sr-only">
						tipologia hint
					</DialogDescription>
				</DialogHeader>
				<div className="flex flex-col gap-8">
					<div className="space-y-2 rounded-md border border-transitorio p-2">
						<h3 className="font-semibold text-lg text-transitorio">
							{t.tipologia_tutorial.transitorio}
						</h3>
						<p>{t.tipologia_tutorial.transitorio_desc}</p>
						<Button
							aria-label={t.tipologia_tutorial.transitorio_cta}
							className="w-full bg-transitorio"
							onClick={async () => await update("Transitorio")}
						>
							{t.tipologia_tutorial.transitorio_cta}

							<ArrowRight className="size-4" />
						</Button>
					</div>
					<div className="space-y-2 rounded-md border border-stabile p-2">
						<h3 className="font-semibold text-lg text-stabile">
							{t.tipologia_tutorial.stabile}
						</h3>
						<p>{t.tipologia_tutorial.stabile_desc}</p>
						<Button
							aria-label={t.tipologia_tutorial.stabile_cta}
							className="w-full bg-stabile"
							onClick={async () => await update("Stabile")}
						>
							{t.tipologia_tutorial.stabile_cta}

							<ArrowRight className="size-4" />
						</Button>
					</div>

					<Button
						aria-label={t.tipologia_tutorial.alone}
						className="w-full"
						onClick={async () => await update(null)}
						variant="outline"
					>
						{t.tipologia_tutorial.alone}
					</Button>
				</div>
			</DialogContent>
		</Dialog>
	);
};