<!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
<template>
  <q-drawer
    v-bind="$attrs"
    v-model="leftDrawerOpen"
    :width="214"
    :breakpoint="500"
    behavior="mobile"
    class="detached-container"
  >
    <div class="menu-wrapper">
      <div class="menu-header">
        <q-img :src="LogoParceiro" style="max-width: 100px" />
      </div>

      <div class="menu-content">
        <q-list class="column no-wrap">
          <template v-for="item in navigation_store.navigationItems">
            <template v-if="item.permission">
              <!-- Single Menu -->
              <q-item
                v-if="item.type === 'single'"
                :key="item.name"
                v-ripple
                clickable
                exact-active-class="menu-selected"
                active-class="menu-selected"
                :exact="item.name == 'CarteirinhaPage'"
                :to="{ name: item.name }"
              >
                <q-item-section avatar>
                  <q-icon :name="item.icon" style="font-size: 20px" />
                </q-item-section>
                <q-item-section>{{ $t(item.title) }}</q-item-section>
              </q-item>
              <!-- Expansive Menu with children -->
              <q-expansion-item
                v-else
                :key="item.icon"
                v-model="isExpasionItemExpanded"
                :class="{
                  'menu-selected':
                    childrenAreActive(item.children) && !isExpasionItemExpanded,
                }"
              >
                <template #header>
                  <q-item-section avatar>
                    <q-icon :name="item.icon" style="font-size: 20px" />
                  </q-item-section>
                  <q-item-section>{{ $t(item.title) }}</q-item-section>
                </template>
                <div v-for="child in item.childrens" :key="child.name">
                  <q-item
                    v-ripple
                    clickable
                    :to="{ name: child.name }"
                    exact
                    exact-active-class="menu-selected"
                    class="q-pl-lg"
                  >
                    <q-item-section avatar>
                      <q-icon :name="child.icon" style="font-size: 20px" />
                    </q-item-section>
                    <q-item-section>{{ $t(child.title) }}</q-item-section>
                  </q-item>
                </div>
              </q-expansion-item>
            </template>
          </template>
        </q-list>

        <q-list class="q-mt-auto">
          <q-item v-ripple clickable @click="logoutFn">
            <q-item-section avatar>
              <q-icon name="mdi-logout" color="negative" style="font-size: 20px" />
            </q-item-section>
            <q-item-section>{{ $t("auth.logout") }}</q-item-section>
          </q-item>
          <q-item v-ripple clickable @click="openUrl('https://softpar.inf.br')">
            <div class="flex full-width justify-center">
              <q-img
                :src="LogoSoftparDark"
                style="width: 100%; height: 30px; max-width: 114px"
              />
            </div>
          </q-item>
        </q-list>
        <div
          class="full-width text-center cursor-pointer q-pb-xs"
          @click="gotoVersionPage()"
        >
          <span class="text-caption text-weight-light text-grey-6">{{
            $t("common.terms.version") + " " + version
          }}</span>
        </div>
      </div>
    </div>
  </q-drawer>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { navigationStore } from "src/stores/navigation";
import { useAuth } from "src/composables/useAuth";
import { version } from "src/../package.json";

import LogoParceiro from "src/assets/logo_serprati_parceiro.svg";
import LogoSoftparDark from "src/assets/softpar_logo_dark.svg";

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

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

const leftDrawerOpen = defineModel({ type: Boolean });
const isExpasionItemExpanded = ref([]);

const childrenAreActive = (children) => {
  if (!Array.isArray(children) || children.length === 0) {
    return false;
  }
  return children.some((child) => route?.name === child?.name);
};

const openUrl = (url) => {
  window.open(url, "_blank");
};

const gotoVersionPage = () => {
  router.push({ name: "SystemVersionsPage" });
};

onMounted(() => {
  navigation_store.navigationItems.forEach((item, index) => {
    if (childrenAreActive(item.childrens)) {
      isExpasionItemExpanded.value[index] = true;
    }
  });
});
</script>

<style lang="scss" scoped>
@use "src/css/quasar.variables.scss" as vars;

.menu-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.menu-header {
  background: vars.$violet-normal;
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  min-height: 56px;
  flex-shrink: 0;
}

.menu-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, vars.$violet-light 0%, white 100%);
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

.menu-selected {
  background-color: vars.$violet-normal !important;
  color: white !important;
  border-radius: 8px;
  margin: 2px 8px;

  :deep(.q-icon) {
    color: white !important;
  }
}
</style>
