<script setup lang="ts">
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useAuth } from "./composables/useAuth";

const route = useRoute();
const router = useRouter();
const { logout } = useAuth();

const activeTab = computed({
  get() {
    if (route.path.startsWith("/contracts")) {
      return "/contracts";
    }

    return route.path.startsWith("/users") ? "/users" : "/tasks";
  },
  set(path: string) {
    if (path !== route.path) {
      router.push(path);
    }
  },
});

const title = computed(() => String(route.meta.title ?? "EWA Mobile"));
const showBack = computed(() => Boolean(route.meta.back));
const showShellNavigation = computed(() => route.path !== "/login");

async function logoutAndRedirect() {
  await logout();
  router.replace("/login");
}
</script>

<template>
  <van-nav-bar
    :title="title"
    :left-arrow="showBack"
    :right-text="showShellNavigation ? 'Выйти' : ''"
    fixed
    placeholder
    @click-left="router.back()"
    @click-right="logoutAndRedirect"
  />

  <main class="page">
    <router-view />
  </main>

  <van-tabbar
    v-if="showShellNavigation"
    v-model="activeTab"
    route
    placeholder
    safe-area-inset-bottom
  >
    <van-tabbar-item to="/tasks" name="/tasks" icon="todo-list-o"
      >Задачи</van-tabbar-item
    >
    <van-tabbar-item to="/contracts" name="/contracts" icon="orders-o"
      >Контракты</van-tabbar-item
    >
    <van-tabbar-item to="/users" name="/users" icon="friends-o"
      >Пользователи</van-tabbar-item
    >
  </van-tabbar>
</template>

<style></style>
