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

const Map = 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 && (
            <>
              <Map
                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>
  );
};