'use client'

import { useEffect, useRef, useState } from 'react'
import mapboxgl from 'mapbox-gl'
import styles from './styles.module.css'
import 'mapbox-gl/dist/mapbox-gl.css'
import { Container } from '@/components/Container/Container'

// todo: as env variable
mapboxgl.accessToken =
  'pk.eyJ1IjoiYnRpZWxlbiIsImEiOiJjbHpzNmNoNjAxdmxqMmpzaWtxOGsxNnY2In0.4XrA_ZlvlmKZ7MG_tLo-mQ'

export const LocationMap = () => {
  const mapContainer = useRef<HTMLDivElement>(null)
  const map = useRef<mapboxgl.Map>(null)
  const [lng, setLng] = useState(13.436093)
  const [lat, setLat] = useState(52.477608)
  const [zoom, setZoom] = useState(15.42)

  useEffect(() => {
    if (map.current) return // initialize map only once

    if (mapContainer.current) {
      map.current = new mapboxgl.Map({
        container: mapContainer.current,
        logoPosition: 'top-left',
        attributionControl: false,
        style: 'mapbox://styles/btielen/clzs6etam008801qu6hpn9qbo',
        center: [lng, lat],
        zoom: zoom,
      })
    }
  })

  return (
    <Container>
      <div ref={mapContainer} className={styles.map}></div>
    </Container>
  )
}
