<template>
  <q-layout class="relative" view="hHh lpR fFf">
    <LeftMenuLayout v-if="!$q.screen.lt.sm" />

    <LeftMenuLayoutMobile v-else v-model="leftDrawerOpen" />

    <q-header v-if="$q.screen.lt.sm" class="bg-transparent q-pa-sm">
      <q-toolbar
        class="flex justify-between bg-surface"
        style="border-radius: 6px !important"
      >
        <q-btn
          dense
          flat
          @click="toggleLeftDrawer"
        >
          <q-icon
            name="menu"
            :color="$q.dark.isActive ? 'white' : 'black'"
          />
        </q-btn>

        <q-btn dense flat>
          <img
            alt="avatar"
            style="width: 20px; height: 20px; border-radius: 50%"
            :src="someAvatar()"
          />

          <q-menu anchor="center right" self="top start">
            <q-list class="column no-wrap overflow-hidden">
              <q-item
                v-close-popup
                v-ripple
                clickable
                exact
                exact-active-class="menu-selected"
                :to="{ name: 'ProfilePage' }"
              >
                <div class="flex">
                  <q-item-section avatar>
                    <q-icon
                      color="primary"
                      name="account_circle"
                      style="font-size: 18px"
                    />
                  </q-item-section>

                  <q-item-section>
                    {{ $t("user.profile.singular") }}
                  </q-item-section>
                </div>
              </q-item>

              <q-item
                v-ripple
                clickable
                @click="logoutFn"
              >
                <div class="flex">
                  <q-item-section avatar>
                    <q-icon
                      color="negative"
                      name="logout"
                      style="font-size: 18px"
                    />
                  </q-item-section>

                  <q-item-section>
                    {{ $t("auth.logout") }}
                  </q-item-section>
                </div>
              </q-item>
            </q-list>
          </q-menu>
        </q-btn>
      </q-toolbar>
    </q-header>

    <q-page-container>
      <q-page>
        <q-scroll-area
          ref="scrollAreaRef"
          :style="
            $q.screen.lt.sm
              ? 'height: calc(100dvh - 68px - env(safe-area-inset-top)) !important;'
              : 'height: calc(100dvh - env(safe-area-inset-top)) !important;'
          "
        >
          <router-view v-slot="{ Component }">
            <Transition mode="out-in">
              <component
                :is="Component"
                :style="$q.screen.lt.sm ? 'padding-left: 10px !important;' : ''"
                style="padding: 20px !important; padding-right: 10px !important"
              />
            </Transition>
          </router-view>
        </q-scroll-area>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<script setup>
import { onMounted, ref, useTemplateRef, watch } from "vue";
import { syncExecutionStore } from "src/stores/syncExecution";
import { useAuth } from "src/composables/useAuth";
import { useRoute } from "vue-router";
import { useRouter } from "vue-router";

import LeftMenuLayout from "src/components/layout/LeftMenuLayout.vue";
import LeftMenuLayoutMobile from "src/components/layout/LeftMenuLayoutMobile.vue";

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

const { logout } = useAuth();

const route = useRoute();
const router = useRouter();
const scrollAreaRef = useTemplateRef("scrollAreaRef");

const syncExecution = syncExecutionStore();

const leftDrawerOpen = ref(false);

let oldValue = route.path;

const logoutFn = async () => {
  await logout();
  router.push({ name: "LoginPage" });
};

const someAvatar = () => {
  return "https://cdn.quasar.dev/img/avatar4.jpg";
};

const toggleLeftDrawer = () => {
  leftDrawerOpen.value = !leftDrawerOpen.value;
};

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

  oldValue = value.path;
});

onMounted(() => {
  syncExecution.fetchLastSyncExecution();
});
</script>
<style scoped>
.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;
}
</style>
