<template>
  <q-layout
    class="main-layout relative"
    view="hHh lpR fFf"
  >
    <q-header
      v-if="$q.screen.lt.sm"
      class="system-bar-spacer"
      :style="{ height: `env(safe-area-inset-top)` }"
    >
    </q-header>

    <q-page-container>
      <q-page
        class="bg-surface main-layout-page"
        style="overflow: hidden"
      >
      <q-scroll-area
        ref="scrollAreaRef"
        class="main-layout-scroll-area"
        :content-active-style="{ width: '100%', maxWidth: '100%', overflowX: 'hidden', boxSizing: 'border-box' }"
        :content-style="{ width: '100%', maxWidth: '100%', overflowX: 'hidden', boxSizing: 'border-box' }"
        :style="scrollAreaHeight"
        >
          <router-view v-slot="{ Component }">
            <Transition mode="out-in">
              <component
                :is="Component"
                :class="{ 'main-layout-view--mobile': $q.screen.lt.sm }"
                class="main-layout-view"
              />
            </Transition>
          </router-view>
        </q-scroll-area>
      </q-page>
    </q-page-container>

    <q-footer
      v-if="$q.screen.lt.sm"
      class="provider-bottom-nav bg-white"
    >
      <nav class="provider-bottom-nav-inner">
        <router-link
          v-for="item in navItems"
          :key="item.name"
          :class="{ 'provider-bottom-nav-item--active': isNavItemActive(item) }"
          :to="{ name: item.name }"
          class="provider-bottom-nav-item"
        >
          <span class="provider-bottom-nav-icon-wrap">
            <q-icon
              class="provider-bottom-nav-icon"
              :name="item.icon"
            />

            <q-badge
              v-if="item.name === 'ScheduleCartPage' && servicePackageCount"
              color="secondary"
              floating
              rounded
            >
              {{ servicePackageCount }}
            </q-badge>
          </span>

          <span class="provider-bottom-nav-label font12">
            {{ item.label }}
          </span>
        </router-link>
      </nav>

      <div class="system-bar-spacer provider-bottom-nav-safe-area"></div>
    </q-footer>
  </q-layout>
</template>

<script setup>
import { computed, useTemplateRef, watch } from "vue";
import { useI18n } from "vue-i18n";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
import { useServicePackageStore } from "src/stores/servicePackage";

defineOptions({
  name: "MainLayout",
});

const { t } = useI18n();
const route = useRoute();
const scrollAreaRef = useTemplateRef("scrollAreaRef");
const $q = useQuasar();

const servicePackage = useServicePackageStore();

const servicePackageCount = computed(() => servicePackage.items.length);

const navItems = computed(() => [
  { name: "DashboardPage", label: t("nav.home"), icon: "mdi-home-outline" },
  { name: "SearchPage", label: t("nav.search"), icon: "mdi-magnify" },
  {
    name: "CalendarPage",
    label: t("nav.agenda"),
    icon: "mdi-calendar-blank-outline",
  },
  {
    name: "ScheduleCartPage",
    label: t("nav.cart"),
    icon: "mdi-shopping-outline",
  },
  {
    name: "ProfilePage",
    label: t("nav.profile"),
    icon: "mdi-account-circle-outline",
  },
]);

const scrollAreaHeight = computed(() => {
  if ($q.screen.lt.sm) {
    return "height: calc(100dvh - env(safe-area-inset-top) - 60px - env(safe-area-inset-bottom)) !important;";
  }

  return "height: 100dvh !important;";
});

let oldValue = route.path;

const isNavItemActive = (item) => route.name === item.name;

watch(
  () => route.path,
  (value) => {
    if (oldValue !== value) {
      scrollAreaRef.value?.setScrollPosition("vertical", 0, 0);
      scrollAreaRef.value?.setScrollPosition("horizontal", 0, 0);
    }

    oldValue = value;
  },
);
</script>
<style scoped>
.main-layout {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.main-layout-page {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.main-layout-scroll-area {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.main-layout-view {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0 !important;
  box-sizing: border-box;
  overflow-x: hidden;
}

.main-layout-view--mobile {
  padding: 0 !important;
}

.v-enter-active {
  opacity: 1;
  transition: all 0.15s ease-in;
}

.v-leave-active {
  opacity: 1;
  transition: all 0.15s ease-out;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
  transition: all 0.15s ease-in;
}

.v-leave-to {
  transition: all 0.15s ease-out;
}

.provider-bottom-nav {
  background: #ffffff;
  box-shadow: 0 -12px 30px rgba(38, 27, 52, 0.1);
}

.provider-bottom-nav-inner {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  height: 60px;
}

.provider-bottom-nav-safe-area {
  height: env(safe-area-inset-bottom, 0px);
}

.provider-bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  min-height: 40px;
  color: #a1a1a1;
  text-decoration: none;
  transition: color 0.2s ease;
}

.provider-bottom-nav-item--active {
  color: #ff00ea;
}

.provider-bottom-nav-icon-wrap {
  position: relative;
  display: inline-flex;
}

.provider-bottom-nav-icon-wrap :deep(.q-badge--floating) {
  top: -8px;
  right: -14px;
}

.provider-bottom-nav-icon {
  font-size: 24px;
  line-height: 1;
}

.provider-bottom-nav-label {
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.provider-bottom-nav-item--active .provider-bottom-nav-label {
  font-weight: 700;
}
</style>
