<template>
  <v-app>
    <v-system-bar v-show="ui.safeArea.top > 0" color="primary" :order="1" :height="ui.safeArea.top" />

    <router-view />
  </v-app>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue"
import { Capacitor } from "@capacitor/core"
import { useUI } from "@/stores/ui"

const ui = useUI()

function updateSafeArea() {
  const topProperty = getComputedStyle(document.documentElement).getPropertyValue("--safe-area-top")
  ui.safeArea.top = parseInt(topProperty.replace("px", ""))
  const bottomProperty = getComputedStyle(document.documentElement).getPropertyValue("--safe-area-top")
  ui.safeArea.bottom = parseInt(bottomProperty.replace("px", ""))
}

onMounted(() => {
  updateSafeArea()
  for (let idx = 1; idx <= 10; idx++) {
    setTimeout(() => updateSafeArea(), 250 * idx)
  }
})
</script>
