'use client'

import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api'
import { useEffect, useMemo, useState } from 'react'

const containerStyle = {
  width: '100%',
  height: '100%',
}

const center = {
  lat: 37.7749,
  lng: -122.4194,
}

const darkMapStyle = [
  { elementType: 'geometry', stylers: [{ color: '#212121' }] },
  { elementType: 'labels.icon', stylers: [{ visibility: 'off' }] },
  { elementType: 'labels.text.fill', stylers: [{ color: '#757575' }] },
  { elementType: 'labels.text.stroke', stylers: [{ color: '#212121' }] },
  {
    featureType: 'administrative',
    elementType: 'geometry',
    stylers: [{ color: '#757575' }],
  },
  {
    featureType: 'poi',
    elementType: 'labels.text.fill',
    stylers: [{ color: '#757575' }],
  },
  {
    featureType: 'poi.park',
    elementType: 'geometry',
    stylers: [{ color: '#181818' }],
  },
  {
    featureType: 'poi.park',
    elementType: 'labels.text.fill',
    stylers: [{ color: '#616161' }],
  },
  {
    featureType: 'road',
    elementType: 'geometry.fill',
    stylers: [{ color: '#2c2c2c' }],
  },
  {
    featureType: 'road',
    elementType: 'labels.text.fill',
    stylers: [{ color: '#8a8a8a' }],
  },
  {
    featureType: 'transit',
    elementType: 'geometry',
    stylers: [{ color: '#2f3948' }],
  },
  {
    featureType: 'water',
    elementType: 'geometry',
    stylers: [{ color: '#000000' }],
  },
  {
    featureType: 'water',
    elementType: 'labels.text.fill',
    stylers: [{ color: '#3d3d3d' }],
  },
]


export const GoogleMapBlock = () => {
  const [mapLoaded, setMapLoaded] = useState(false)

  const icon = useMemo(() => {
    if (typeof window !== 'undefined' && window.google?.maps && mapLoaded) {
      return {
        url: '/custom-map/pin.png',
        scaledSize: new window.google.maps.Size(40, 40),
      }
    }
    return undefined
  }, [mapLoaded])

  return (
    <LoadScript googleMapsApiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY!}>
      <GoogleMap
        mapContainerStyle={containerStyle}
        center={center}
        zoom={12}
        options={{
          styles: darkMapStyle,
          disableDefaultUI: true,
        }}
      >
          {icon && <Marker position={center} icon={icon} />}
      </GoogleMap>
    </LoadScript>
  )
}
