import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";
import { Icon } from "leaflet";
import "leaflet/dist/leaflet.css";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";
import { Map as MapIcon } from "lucide-react";
import { Cliente } from "@/generated/prisma";

const Map = ({
  highlight,
  clienti,
}: {
  highlight?: Cliente;
  clienti?: Array<Cliente>;
}) => {
  const positions = [
    {
      name: "Autogeneral",
      position: [45.49285083101236, 10.15951437254693],
      sede_url: "https://maps.app.goo.gl/9uNbw2a62ZCCjkQc7",
    },
    {
      name: "Delizie e Sapori (Cuor di gelato)",
      position: [45.55425938252774, 10.227818585851844],
      sede_url: "https://maps.app.goo.gl/9uNbw2a62ZCCjkQc7",
    },
    {
      name: "Casa dell'Ottica di Zanotti Giulio",
      position: [45.53644055688526, 10.222584658771389],
      sede_url: "https://maps.app.goo.gl/9uNbw2a62ZCCjkQc7",
    },
    {
      name: "Nuova Ottica",
      position: [45.48257540298808, 10.23957216093029],
      sede_url: "https://maps.app.goo.gl/9uNbw2a62ZCCjkQc7",
    },
    {
      name: "Savoldi Ettore",
      position: [45.486316837251415, 10.1737522099259],
      sede_url: "https://maps.app.goo.gl/9uNbw2a62ZCCjkQc7",
    },
  ];

  const customMarker = new Icon({
    iconUrl: "marker-icon-red.png",
    iconAnchor: [10, 20],
    popupAnchor: [0, -15],
  });

  return (
    <MapContainer
      center={
        highlight
          ? [highlight.lat, highlight.lon]
          : [45.54157745559809, 10.211896906975962]
      }
      zoom={13}
      scrollWheelZoom={true}
      className="m-0 p-0 h-[99%] w-[99%] mx-[0.5%] my-[0.5%] rounded-md z-0"
    >
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url={`https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`}
      />
      {highlight == null ? (
        clienti ? (
          clienti.map((client) => (
            <Marker
              position={[client.lat, client.lon]}
              draggable={false}
              animate={false}
              icon={customMarker}
              key={client.id}
            >
              <Popup className="">
                <div className="flex flex-row gap-5">
                  <div>
                    <span className="block text-sm font-bold">
                      {client.ragione_sociale}
                    </span>
                    <div className="flex gap-2">
                      <span className="text-xs font-semibold">P.IVA</span>
                      <span className="text-xs">{client.partita_iva}</span>
                    </div>
                  </div>

                  <Tooltip>
                    <TooltipTrigger asChild>
                      <a href={client.sede_url} target="blank">
                        <Button variant="outline">
                          <MapIcon className="size-4" />
                        </Button>
                      </a>
                    </TooltipTrigger>
                    <TooltipContent>
                      <p>Resetta ricerca</p>
                    </TooltipContent>
                  </Tooltip>
                </div>
              </Popup>
            </Marker>
          ))
        ) : (
          <></>
        )
      ) : (
        <Marker
          position={[highlight.lat, highlight.lon]}
          draggable={false}
          animate={false}
          icon={customMarker}
        >
          <Popup className="">
            <div className="flex flex-row gap-5">
              <div>
                <span className="block text-sm font-bold">
                  {highlight.ragione_sociale}
                </span>
                <div className="flex gap-2">
                  <span className="text-xs font-semibold">P.IVA</span>
                  <span className="text-xs">03417520172</span>
                </div>
              </div>

              <Tooltip>
                <TooltipTrigger asChild>
                  <a href={highlight.sede_url} target="blank">
                    <Button variant="outline">
                      <MapIcon className="size-4" />
                    </Button>
                  </a>
                </TooltipTrigger>
                <TooltipContent>
                  <p>Resetta ricerca</p>
                </TooltipContent>
              </Tooltip>
            </div>
          </Popup>
        </Marker>
      )}
    </MapContainer>
  );
};

export default Map;
