<template>
  <div class="app-container h-full">
    <FullscreenViewport v-if="platform === 'ios' || platform === 'android'"/>
    <router-view/>
    <CartButton/>
  </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";
import CartButton from "@/components/CartButton.vue";

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

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

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

watch(
    () => route.name,
    () => {
      if (route.name === 'home') {
        window.Telegram.WebApp.BackButton.hide();
        window.Telegram.WebApp.BackButton.offClick();
      } else {
        window.Telegram.WebApp.BackButton.show();
        window.Telegram.WebApp.BackButton.onClick(() => {
          window.Telegram.WebApp.HapticFeedback.impactOccurred('light');
          router.back();
        });
      }
    },
    {immediate: true}
);
</script>
