"use client";

import React from "react";
import { useState, useRef } from "react";
import {
  APIProvider,
  Map,
  AdvancedMarker,
  Pin,
  InfoWindow,
  MapMouseEvent,
} from "@vis.gl/react-google-maps";

import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";

interface MarkerCoords {
  lat: number;
  lng: number;
}

const api_key = process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY || "";
const mapId = process.env.NEXT_PUBLIC_MAP_ID;

export function MapComp() {
  const [markers, setMarkers] = useState<MarkerCoords[]>([]);
  const [message, setMessage] = useState<string>("");
  const [link, setLink] = useState<string>("");
  const [dialogOpen, setDialogOpen] = useState(false); // State for controlling dialog visibility


  const [selectedMarker, setSelectedMarker] = useState<MarkerCoords | null>(
    null
  );

  const onMapClick = (event: MapMouseEvent) => {
    if (!dialogOpen) {
      if (event.detail.latLng) {
        const { lat, lng } = event.detail.latLng;
        if (lat !== undefined && lng !== undefined) {
          const newMarker = {
            lat: lat,
            lng: lng,
          };
          setSelectedMarker(newMarker);
          setMarkers((current) => [...current, newMarker]);
          setDialogOpen(true);
        }
      }
    }
  };

  const handlePost = () => {
    console.log("Message:", message);
    console.log("Link:", link);
  };

  return (
    <APIProvider apiKey={api_key}>
      <div style={{ height: "100vh", width: "100vw" }}>
        <Map
          defaultZoom={8}
          defaultCenter={{ lat: 53.54, lng: 10 }}
          minZoom={3}
          mapId={mapId}
          mapTypeControl={false}
          streetViewControl={false}
          clickableIcons={false}
          fullscreenControl={false}
          onClick={onMapClick}
          restriction={{
            latLngBounds: {
              north: 85,
              south: -85,
              west: -179.9999,
              east: 179.9999,
            },
            strictBounds: true,
          }}
        >
          {markers.map((marker, index) => (
            <AdvancedMarker
              key={index}
              position={{ lat: marker.lat, lng: marker.lng }}
              onClick={() => handleToggleInfoWindow(index)}
            >
              <Pin
                background={"black"}
                borderColor={"black"}
                glyphColor={"black"}
              />
            ...
                      >
                        Post
                      </Button>
                    )}
                  </div>
                </InfoWindow>
              )}
            </AdvancedMarker>
          ))}
          <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Map</DialogTitle>
                <DialogDescription>
                  {selectedMarker?.lat.toFixed(3) +
                    " °N " +
                    selectedMarker?.lng.toFixed(3) +
                    " °W"}
                </DialogDescription>
                <DialogClose asChild>Button</DialogClose>
              </DialogHeader>
              <div className="grid gap-4 py-4">
                <div className="grid grid-cols-4 items-center gap-4">
                  <Label>Message</Label>
                  <Input
                    style={{ zIndex: 99 }}
                    id="message"
                    placeholder="Post."
                    type="string"
                    className="col-span-3"
                    defaultValue={message}
                    onChange={(e) => setMessage(e.target.value)}
                  />
                </div>
 ...
              </div>
              <Button onClick={() => handlePost()}>Post</Button>
            </DialogContent>
          </Dialog>
        </Map>
      </div>
    </APIProvider>
  );
}