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

"use client";
import { MapIcon } from "lucide-react";
import dynamic from "next/dynamic";
import { useState } from "react";
import { Button } from "~/components/ui/button";
import {
	Dialog,
	DialogContent,
	DialogDescription,
	DialogHeader,
	DialogTitle,
	DialogTrigger,
} from "~/components/ui/dialog";
import { useTranslation } from "~/providers/I18nProvider";

const MapComp = dynamic(() => import("~/components/map/Map"), {
	ssr: false,
});

export const MappaDialogFullscreen = ({
	lat,
	long,
}: {
	lat: string | null;
	long: string | null;
}) => {
	const { t } = useTranslation();
	const [open, setOpen] = useState(false);
	return (
		<Dialog open={open} onOpenChange={setOpen}>
			<DialogTrigger asChild>
				<Button className="w-auto grow" disabled={!lat || !long}>
					<MapIcon className="size-5" /> {t.mappa}
				</Button>
			</DialogTrigger>
			<DialogContent className="h-full w-screen max-w-[100vw] p-0 sm:max-h-[60vh] sm:max-w-2xl [&_#dialog-close]:bg-white [&_#dialog-close]:opacity-100 [&_#dialog-close>svg]:size-8">
				<DialogHeader className="hidden h-0">
					<DialogTitle className="sr-only">{t.mappa}</DialogTitle>
					<DialogDescription className="sr-only">{t.mappa}</DialogDescription>
				</DialogHeader>
				<div className="size-full">
					{lat && long && (
						<>
							<MapComp
								posix={{
									pos: {
										lat: Number.parseFloat(lat),
										lng: Number.parseFloat(long),
									},
									popupTxt:
										"Posizione esatta fornita dopo la richiesta di contatto",
								}}
								markerType="home"
								scrollWheelZoom
								width="100%"
								height="100%"
								zoom={14}
							/>
						</>
					)}
				</div>
			</DialogContent>
		</Dialog>
	);
};