<template>
  <main class="entry-page">
    <section id="viewer" class="entry-viewer"></section>
  </main>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
import { onMounted, ref } from 'vue'
import 'geovisio/build/index.css'
import GeoVisio from 'geovisio'
import { createLink } from '@/components-viewer/reportLink'
import { createUrlLink } from '@/utils/index'
import type { ViewerMapInterface } from '@/views/interfaces/common'
import { getIgnTiles } from '@/utils/mapAndViewer'

const { t } = useI18n()
let mapIsLoaded = ref<boolean>(false)
let viewer = ref()

onMounted(async () => {
  const reportLink = document.createElement('div')
  reportLink.className = 'gvs-group gvs-group-large gvs-group-btnpanel'
  const tiles = import.meta.env.VITE_TILES
  const maxZoom = import.meta.env.VITE_MAX_ZOOM
  const zoom = import.meta.env.VITE_ZOOM
  const center = import.meta.env.VITE_CENTER
  let paramsGeovisio: ViewerMapInterface = {
    map: {
      startWide: true
    }
  }
  if (center && center !== '') {
    const centerMap = center.split(',').map((el: string) => parseInt(el))
    paramsGeovisio = {
      map: {
        ...paramsGeovisio.map,
        center: centerMap
      }
    }
  }
  if (zoom && zoom !== '') {
    paramsGeovisio = {
      map: {
        ...paramsGeovisio.map,
        zoom: parseFloat(zoom)
      }
    }
  }
  if (maxZoom && maxZoom !== '') {
    paramsGeovisio = {
      map: {
        ...paramsGeovisio.map,
        maxZoom: parseInt(maxZoom)
      }
    }
  }
  if (tiles) {
    const style = tiles.includes('wxs.ign.fr') ? await getIgnTiles() : tiles
    paramsGeovisio = {
      map: {
        ...paramsGeovisio.map,
        style
      }
    }
  }
  try {
    viewer.value = await new GeoVisio(
      'viewer', // Div ID
      `${import.meta.env.VITE_API_URL}/api/search`,
      {
        ...paramsGeovisio,
        widgets: { customWidget: reportLink }
      }
    )
    if (viewer.value && viewer.value.addEventListener) {
      viewer.value.addEventListener(
        'picture-loaded',
        async (e: { detail: { picId: string } }): Promise<void> => {
          const href = t('pages.home.report_mail', {
            picId: e.detail.picId,
            link: createUrlLink(e.detail.picId)
          })
          reportLink.innerHTML = createLink(
            href,
            t('pages.home.report_button_text')
          )
        }
      )
    }
    mapIsLoaded.value = true
  } catch (err) {
    console.log(err)
  }
})
</script>
<style scoped lang="scss">
.entry-page {
  display: flex;
}
.entry-viewer {
  font-size: initial;
  width: 100vw;
  position: relative;
  min-height: calc(100vh - #{toRem(27.42)});
}
.gvs-focus-map .entry-report-button {
  display: none;
}
@media (max-width: toRem(50)) {
  .entry-page {
    padding-top: toRem(11);
    overflow: hidden;
  }
  @supports (-webkit-touch-callout: none) {
    /* CSS specific to iOS devices */
    .entry-viewer {
      min-height: -webkit-fill-available;
      min-height: moz-available;
      min-height: fill-available;
    }
  }
  @supports not (-webkit-touch-callout: none) {
    /* CSS for other than iOS devices */
    .entry-viewer {
      min-height: calc(100vh - #{toRem(17)});
    }
  }
}
</style>
