<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { loadModules } from 'esri-loader'
// import http from '@/plugins/http'
// import config from '@/app.config'

async function initMap() {
  const [esriConfig, Map, MapView, Locate, Graphic, Locator] = await (
    loadModules as any
  )([
    'esri/config',
    'esri/Map',
    'esri/views/MapView',
    'esri/widgets/Locate',
    'esri/Graphic',
    'esri/tasks/Locator',
    'esri/rest/locator',
  ])

  esriConfig.apiKey =
    'AAPK2385005bb90a4410ae22d55f6f735877JmnPjYMAxBHQFYLGaXAbZc39AdiWjFKpt-mbsaP50ceZwVH9FdT7WMZ80VanLLWs' // Replace with your actual API key

  //typeMap
  const map = new Map({
    basemap: 'osm-streets-relief',
  })

  // // Check if the container element exists
  const view = new MapView({
    map: map,
    center: [0, 0],
    zoom: 13, // scale: 72223.819286
    container: 'viewDiv',
    constraints: {
      snapToZoom: false,
    },
  })

  // หาตำแหน่ง
  const locateWidget = new Locate({
    view: view,
    useHeadingEnabled: false,
  })
  view.ui.add(locateWidget, 'top-left')

  navigator.geolocation.getCurrentPosition(
    (position) => {
      const [longitude, latitude] = [
        position.coords.longitude,
        position.coords.latitude,
      ]
      const locator = new Locator(
        'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/reverseGeocode/'
      )
      findNearestPlaceFromAPI(position, locator)

      // Create a graphic for the current location
      const point = {
        type: 'point',
        longitude: longitude,
        latitude: latitude,
      }

      const marker = new Graphic({
        geometry: point,
        symbol: {
          type: 'simple-marker',
          color: [226, 119, 59],
          outline: {
            color: [255, 255, 255],
            width: 2,
          },
        },
      })

      // Add the graphic to the view
      view.graphics.removeAll() // ลบกราฟิกทั้งหมดก่อนเพื่อป้องกันการทับซ้อน
      view.graphics.add(marker)

      // Center the view on the current location
      view.goTo({
        center: [longitude, latitude],
        zoom: 18,
      })
    },

    (error) => {
      console.error('Error getting current location:', error)
    }
  )
}

async function findNearestPlaceFromAPI(currentPosition: any, locator: any) {
  console.log(currentPosition, locator)
  // ทำการค้นหาสถานที่ใกล้ที่สุด
  const result = await locator.addressToLocations({
    location: {
      x: currentPosition.coords.longitude,
      y: currentPosition.coords.latitude,
    },

    distance: 5000, // รัศมีค้นหา 5 กิโลเมตร (ปรับตามต้องการ)
    category: 'POI', //
  })
  console.log('test', result)
}

onMounted(async () => {
  // Load the ArcGIS API modules
  await initMap()
})
</script>
<template>
  <div>
    <div id="viewDiv" style="height: 50vh"></div>
  </div>
</template>

<style scoped></style>
