<template>
  <div class="app-container">
    <FullscreenViewport v-if="platform === 'ios' || platform === 'android'"/>
    <router-view />
  </div>
</template>

<script setup>
import {onMounted, ref, watch} from "vue";
import { useWebAppViewport, useBackButton } from 'vue-tg';
import { useMiniApp, FullscreenViewport } from 'vue-tg';
import {useRoute, useRouter} from "vue-router";

const tg = useMiniApp();
const platform = ref();
platform.value = tg.platform;

const { disableVerticalSwipes } = useWebAppViewport();
disableVerticalSwipes();

const router = useRouter();
const route = useRoute();
const backButton = useBackButton();

watch(
    () => route.fullPath,
    () => {
      if (route.name === 'home') {
        if (typeof backButton.hide === 'function') {
          backButton.hide();
        }
      } else {
        if (typeof backButton.show === 'function') {
          backButton.show();
          backButton.onClick(() => {
            router.back();
          });
        }

      }
    },
    { immediate: true }
);
</script>
