"use client";
import { MapIcon, Ruler } 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);
	const [isMeasuring, setIsMeasuring] = useState(false);
	return (
		<Dialog onOpenChange={setOpen} open={open}>
			<DialogTrigger asChild>
				<Button className="w-auto grow" disabled={!lat || !long}>
					<MapIcon /> {t.mappa}
				</Button>
			</DialogTrigger>
			<DialogContent className="h-full w-screen max-w-[100vw] p-0 **:data-[slot=dialog-close]:cursor-pointer **:data-[slot=dialog-close]:rounded-md **:data-[slot=dialog-close]:bg-white **:data-[slot=dialog-close]:opacity-100 sm:max-h-[60vh] sm:max-w-2xl [&_[data-slot=dialog-close]>svg]:size-6!">
				<DialogHeader className="hidden h-0">
					<DialogTitle className="sr-only">{t.mappa}</DialogTitle>
					<DialogDescription className="sr-only">{t.mappa}</DialogDescription>
				</DialogHeader>
				<Button
					className="absolute bottom-2 left-2 z-10"
					disabled={!lat || !long}
					onClick={() => setIsMeasuring((m) => !m)}
					variant="orange"
				>
					<Ruler /> {isMeasuring ? "Clicca sulla mappa" : "Misura"}
				</Button>
				<div className="size-full">
					{lat && long && (
						<>
							<MapComp
								height="100%"
								isMeasuring={isMeasuring}
								markerType="home"
								posix={{
									popupTxt:
										"Posizione esatta fornita dopo la richiesta di contatto",
									pos: {
										lat: Number.parseFloat(lat),
										lng: Number.parseFloat(long),
									},
								}}
								scrollWheelZoom
								width="100%"
								zoom={14}
							/>
						</>
					)}
				</div>
			</DialogContent>
		</Dialog>
	);
};
