<template>
  <div class="app-container h-full">
    <header class="app-header w-full" v-if="platform === 'ios'"></header>

    <section class="safe-top">
      <FullscreenViewport v-if="platform === 'ios' || platform === 'android'"/>
      <RouterView v-slot="{ Component, route }">
        <Transition name="route" appear>
          <component :is="Component" :key="route.fullPath"/>
        </Transition>
      </RouterView>
      <CartButton v-if="settings.store_enabled"/>
    </section>
  </div>
</template>

<script setup>
import {ref, watch} from "vue";
import {useWebAppViewport} from 'vue-tg';
import {useMiniApp, FullscreenViewport} from 'vue-tg';
import {useRoute, useRouter} from "vue-router";
import CartButton from "@/components/CartButton.vue";
import {useSettingsStore} from "@/stores/SettingsStore.js";

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

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

const router = useRouter();
const route = useRoute();
const settings = useSettingsStore();
const backButton = window.Telegram.WebApp.BackButton;
const haptic = window.Telegram.WebApp.HapticFeedback;

function navigateBack() {
  haptic.impactOccurred('light');
  router.back();
}

watch(
    () => route.name,
    () => {
      if (route.name === 'home') {
        backButton.hide();
        backButton.offClick(navigateBack);
      } else {
        backButton.show();
        backButton.onClick(navigateBack);
      }
    },
    {immediate: true}
);
</script>

<style scoped>
/* route transitions */
.route-enter-active,
.route-leave-active {
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.route-enter-from {
  opacity: 0;
  transform: translateY(10px);
}

.route-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
</style>