"use client"
// import { images } from "@/app/constants/images"
import { GoogleMap, Marker, useJsApiLoader } from "@react-google-maps/api"
import { useCallback, useEffect, useRef, useState } from "react"

// import locationMap from "@/../public/images/kinetic/locationMap.svg"

type MapProps_TP = {
    center: {
        lat: string | number
        lng: string | number
    }
    zoom: number
    width?: string
    height?: string
    markerPositions: { lat: string | number; long: string | number }[]
}
type Map = google.maps.Map

const Map = ({ center, zoom, width = "95%", height = "490px", markerPositions }: MapProps_TP) => {
    const [markerPosition, setMarkerPosition] = useState(center)
    console.log("🚀 ~ markerPosition:", markerPosition)
    const mapRef = useRef<Map>()
    const { isLoaded } = useJsApiLoader({
        id: "google-map-script",
        googleMapsApiKey: "AIzaSyBVofSHmm5fYuCQFYHlNSltQJhVjAi1H80",
        libraries: ["places"],
    })
    //   map style start
    const darkModeStyles = [
        {
            elementType: "geometry",
            stylers: [
                {
                    color: "#1d1d1d", // Dark background color
                },
            ],
        },
        {
            elementType: "labels.text.fill",
            stylers: [
                {
                    color: "#8b8b8b", // Light text color
                },
            ],
        },
        {
            elementType: "labels.text.stroke",
            stylers: [
                {
                    color: "#1a1a1a", // Dark text stroke color
                },
            ],
        },
        {
            featureType: "administrative",
            elementType: "geometry.stroke",
            stylers: [
                {
                    color: "#ffffff", // White borders for administrative areas
                },
            ],
        },
        {
            featureType: "administrative.land_parcel",
            elementType: "geometry.stroke",
            stylers: [
                {
                    color: "#ffffff", // White borders for land parcels
                },
            ],
        },
        {
            featureType: "landscape",
            elementType: "all",
            stylers: [
                {
                    color: "#242424", // Dark landscape color
                },
            ],
        },
        {
            featureType: "poi",
            elementType: "all",
            stylers: [
                {
                    color: "#363636", // Dark POI color
                },
            ],
        },
        {
            featureType: "road",
            elementType: "all",
            stylers: [
                {
                    color: "#484848", // Dark road color
                },
            ],
        },
        {
            featureType: "transit",
            elementType: "all",
            stylers: [
                {
                    color: "#575757", // Dark transit color
                },
            ],
        },
        // Omitting water feature to retain default color
    ]
    //   map style end
    // Handle event when the map is loaded
    const onLoad = useCallback((map: Map) => {
        mapRef.current = map
    }, [])

    useEffect(() => {
        setMarkerPosition(center)
    }, [])

    return isLoaded ? (
        <div
            // className="w-full h-full col-span-full"

            style={{
                width: "100%",
                height: "100%",
                gridColumn: "span 12 / span 12", // يمكن تعديل الرقم حسب عدد الأعمدة
            }}
        >
            <GoogleMap
                mapContainerStyle={{ width, height }}
                // @ts-ignore
                center={markerPosition}
                zoom={zoom}
                options={{
                    // styles: darkModeStyles,
                    disableDefaultUI: true,
                }}
                onLoad={onLoad}
            >
                {markerPositions?.map((marker) => (
                    // @ts-ignore
                    <Marker
                        // icon={locationMap}
                        key={marker?.lat}
                        // @ts-ignore
                        position={center}
                    />
                ))}
            </GoogleMap>
        </div>
    ) : null
}

export default Map