<template>
  <q-drawer
    v-bind="$attrs"
    :model-value="true"
    show-if-above
    no-swipe-close
    no-swipe-open
    :width="214"
    :mini-width="60"
    :breakpoint="500"
    :mini="miniState"
    :behavior="'desktop'"
    class="detached-container"
  >
    <div class="column full-height no-wrap">
      <div class="menu-header">
        <q-img
          v-if="!miniState"
          :src="LogoParceiro"
          style="width: 100px; height: 36px"
        />
        <q-img v-else :src="LogoParceiroSmall" style="width: 32px; height: 32px" />
      </div>

      <div class="menu-content column full-height no-wrap">
        <div
          class="toggle-button-wrapper absolute"
          style="top: 2px; right: -32px; z-index: 1"
        >
          <div @click="miniState = !miniState">
            <q-icon
              size="sm"
              :name="
                miniState
                  ? 'mdi-page-layout-sidebar-right'
                  : 'mdi-page-layout-sidebar-left'
              "
              color="primary"
            />
            <q-tooltip
              anchor="center right"
              self="center left"
              :offset="[10, 10]"
              >{{
                miniState
                  ? $t("ui.navigation.expand_menu")
                  : $t("ui.navigation.collapse_menu")
              }}</q-tooltip
            >
          </div>
        </div>
        <q-list class="column no-wrap">
          <template v-for="(item, index) in navigation_store.navigationItems">
            <template v-if="item.permission">
              <q-item
                v-if="item.type === 'single'"
                :key="item.name"
                v-ripple
                clickable
                :exact="item.name == 'HomePage'"
                exact-active-class="menu-selected"
                active-class="menu-selected"
                :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-tooltip
                  v-if="miniState"
                  anchor="center right"
                  self="center left"
                  :offset="[10, 10]"
                  >{{ $t(item.title) }}</q-tooltip
                >
              </q-item>
              <!-- Expansive Menu with children -->
              <div v-else :key="item.title">
                <template v-if="!miniState">
                  <q-tooltip
                    v-if="miniState"
                    anchor="center right"
                    self="center left"
                    :offset="[10, 10]"
                    >{{ $t(item.title) }}</q-tooltip
                  >
                  <q-expansion-item
                    v-model="isExpasionItemExpanded[index]"
                    :class="{
                      'menu-selected':
                        childrenAreActive(item.childrens) &&
                        !isExpasionItemExpanded[index],
                    }"
                  >
                    <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-tooltip
                          v-if="miniState"
                          anchor="center right"
                          self="center left"
                          :offset="[10, 10]"
                          >{{ $t(child.title) }}</q-tooltip
                        >
                      </q-item>
                    </div>
                  </q-expansion-item>
                </template>
                <template v-else>
                  <q-item
                    v-ripple
                    clickable
                    exact
                    exact-active-class="menu-selected"
                    :class="{
                      'menu-selected': childrenAreActive(item.childrens),
                    }"
                  >
                    <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-tooltip
                      v-if="miniState"
                      anchor="center right"
                      self="center left"
                      :offset="[10, 10]"
                      >{{ $t(item.title) }}</q-tooltip
                    >
                    <q-menu
                      class="menu-drawer"
                      anchor="center right"
                      self="top start"
                    >
                      <q-list>
                        <q-item
                          v-for="child in item.childrens"
                          :key="child.name"
                          v-ripple
                          v-close-popup
                          clickable
                          :to="{ name: child.name }"
                          exact
                          exact-active-class="menu-selected"
                          class="menu-drawer"
                        >
                          <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>
                      </q-list>
                    </q-menu>
                  </q-item>
                </template>
              </div>
            </template>
          </template>
        </q-list>
        <q-list class="column q-mb-md no-wrap" style="border-radius: 6px">
        </q-list>
        <q-list class="q-mt-auto">
          <q-item v-ripple clickable @click="logoutFn">
            <div class="flex">
              <q-item-section avatar>
                <q-icon
                  name="logout"
                  color="negative"
                  style="font-size: 20px"
                />
              </q-item-section>
              <q-item-section>{{ $t("auth.logout") }}</q-item-section>
            </div>
            <q-tooltip
              v-if="miniState"
              anchor="center right"
              self="center left"
              :offset="[10, 10]"
              >{{ $t("auth.logout") }}</q-tooltip
            >
          </q-item>
          <q-item v-ripple clickable @click="openUrl('https://softpar.inf.br')">
            <div class="flex full-width justify-center">
              <q-img
                :src="miniState ? LogoSoftparMini : LogoSoftparDark"
                style="width: 100%; height: 30px"
                :style="miniState ? 'max-width: 48px' : 'max-width: 100px'"
              />
            </div>
          </q-item>
        </q-list>
        <div
          class="full-width text-center text-subtitle3 q-pb-xs cursor-pointer"
          @click="gotoVersionPage()"
        >
          <span
            v-if="!miniState"
            class="text-caption text-weight-light"
            >{{ $t("common.terms.version") + " " + version }}</span
          >
          <span v-else class="text-caption text-weight-light">{{
            version
          }}</span>
        </div>
      </div>
    </div>
  </q-drawer>
</template>
<script setup>
import { ref, watch, onMounted } from "vue";
import { useAuth } from "src/composables/useAuth";
import { useRouter, useRoute } from "vue-router";
import { navigationStore } from "src/stores/navigation";
import { Cookies } from "quasar";
import { version } from "src/../package.json";

import LogoParceiro from "src/assets/logo_serprati_parceiro.svg";
import LogoParceiroSmall from "src/assets/logo_serprati_parceiro_small.svg";
import LogoSoftparDark from "src/assets/softpar_logo_dark.svg";
import LogoSoftparMini from "src/assets/softpar_logo_mini.svg";

const { logout } = useAuth();
const router = useRouter();
const route = useRoute();
const navigation_store = navigationStore();
const miniStateCookies = Cookies.get("miniState");
const miniState = ref(miniStateCookies === "true" ? true : false);

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

const isExpasionItemExpanded = ref([]);

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

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

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

watch(miniState, () => {
  Cookies.set("miniState", miniState.value, { path: "/", sameSite: "Lax" });
});

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-header {
  background: vars.$violet-normal;
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  min-height: 60px;
  flex-shrink: 0;
}

.menu-content {
  flex: 1;
  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;
  }
}

.toggle-button-wrapper {
  transition: transform 0.3s ease;
  &:hover { transform: scale(1.1); }
}
</style>
