<template>
  <PageLayout
    aboutThisDescription="SamGIS - Segment Anything for GIS"
    aboutThisUrl="https://trinca.tornidor.com/projects/samgis-segment-anything-applied-to-GIS"
    currentPageUrl="https://aletrn-samgis-lisa-on-zero.hf.space/samgis"
    pageTitle="SamGIS demo"
    switchTabDescription="LISA+SamGIS+ZeroGPU demo"
    :switchTabUrl="switchTabUrlRef"
  >
    <div>
      <div id="map-container-md-main">
        <PredictionMap
            :mapName="mapName"
            :mapBounds='[{
                    "lat": 46.235421781941776,
                    "lng": 9.49699401855469
                }, {
                    "lat": 46.1351347810282,
                    "lng": 9.32121276855469
              }]'
            :description=description
        />
      </div>
    </div>
  </PageLayout>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

import PredictionMap from '@/components/PagePredictionMap.vue'
import PageLayout from '@/components/PageLayout.vue'

const switchTabUrl = import.meta.env.VITE_LISA_URL ? import.meta.env.VITE_LISA_URL : "/"
const switchTabUrlRef = ref(switchTabUrl)
const mapName = ref('prediction-map')
const description = ref("This page displays predictions made with a machine learning model")

onMounted(() => {
  console.log("descr:", description.value, import.meta.env.VITE__MAP_DESCRIPTION)
  console.log("switchTabUrl:", switchTabUrl, ", urls from env:", import.meta.env.VITE_SAMGIS_URL, import.meta.env.VITE_LISA_URL, "#")
  description.value = import.meta.env.VITE__MAP_DESCRIPTION ? import.meta.env.VITE__MAP_DESCRIPTION : description.value
})
</script>