<template>
  <q-drawer
    v-bind="$attrs"
    :model-value="true"
    :behavior="'desktop'"
    :breakpoint="500"
    :mini="miniState"
    :mini-width="60"
    :width="214"
    class="detached-container"
    no-swipe-close
    no-swipe-open
    show-if-above
  >
    <div class="column full-height no-wrap q-drawer-container">
      <div class="overflow-hidden" style="border-radius: 8px 8px 0px 0px">
        <div
          class="flex flex-center full-width q-pa-sm bg-terciary"
          style="height: 60px"
        >
          <q-img
            v-if="!miniState"
            :src="Logo"
            style="width: 138px; height: 39px"
          />
          <q-img v-else :src="MiniLogo" style="width: 59px; height: 50px" />
        </div>
      </div>

      <div class="column full-height no-wrap">
        <div
          v-if="!$q.screen.lt.md"
          class="toggle-button-wrapper absolute"
          style="top: 4px; right: -32px; z-index: 1; height: 24px"
        >
          <div
            class="flex items-center justify-center full-height"
            @click="miniState = !miniState"
          >
            <q-icon
              size="sm"
              :name="
                miniState
                  ? 'mdi-page-layout-sidebar-right'
                  : 'mdi-page-layout-sidebar-left'
              "
              color="secondary"
            />
            <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-scroll-area class="menu-scroll col" bar-color="secondary">
          <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"
                      color="secondary"
                    />
                  </q-item-section>
                  <q-item-section>{{ menuLabel(item.title) }}</q-item-section>
                  <q-tooltip
                    v-if="miniState"
                    anchor="center right"
                    self="center left"
                    :offset="[10, 10]"
                    >{{ menuLabel(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]"
                      >{{ menuLabel(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"
                            color="secondary"
                          />
                        </q-item-section>
                        <q-item-section>{{
                          menuLabel(item.title)
                        }}</q-item-section>
                      </template>
                      <div
                        v-for="child in item.childrens"
                        :key="child.name"
                        :class="{
                          'financial-submenu': item.title === 'Financeiro',
                        }"
                      >
                        <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>{{
                            menuLabel(child.title)
                          }}</q-item-section>
                          <q-tooltip
                            v-if="miniState"
                            anchor="center right"
                            self="center left"
                            :offset="[10, 10]"
                            >{{ menuLabel(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"
                          color="secondary"
                        />
                      </q-item-section>
                      <q-item-section>{{
                        menuLabel(item.title)
                      }}</q-item-section>
                      <q-tooltip
                        v-if="miniState"
                        anchor="center right"
                        self="center left"
                        :offset="[10, 10]"
                        >{{ menuLabel(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>{{
                              menuLabel(child.title)
                            }}</q-item-section>
                          </q-item>
                        </q-list>
                      </q-menu>
                    </q-item>
                  </template>
                </div>
              </template>
            </template>
          </q-list>
        </q-scroll-area>
        <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-mx-auto">
              <q-item-section avatar>
                <div class="flex q-mx-auto q-gutter-x-xs">
                  <q-icon
                    name="logout"
                    color="negative"
                    style="font-size: 20px"
                  />

                  <div>SAIR</div>
                </div>
              </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 || $q.screen.lt.md
                    ? LogoSoftparMini
                    : $q.dark.isActive
                      ? LogoSoftparLight
                      : LogoSoftparDark
                "
                style="width: 100%; height: 30px"
                :style="
                  miniState || $q.screen.lt.md
                    ? 'max-width: 48px'
                    : 'max-width: 100px'
                "
              />
            </div>
          </q-item>
        </q-list>
        <div
          class="full-width text-center q-pb-xs cursor-pointer text-dark"
          @click="gotoVersionPage()"
        >
          <span v-if="!(miniState || $q.screen.lt.md)" class="text-caption">{{
            $t("common.terms.version") + " " + version
          }}</span>
          <span v-else class="text-caption">{{ version }}</span>
        </div>
      </div>
    </div>
  </q-drawer>
</template>
<script setup>
import { navigationStore } from "src/stores/navigation";
import { onMounted, ref, watch, watchEffect } from "vue";
import { useAuth } from "src/composables/useAuth";
import { useI18n } from "vue-i18n";
import { useQuasar, Cookies } from "quasar";
import { useRouter, useRoute } from "vue-router";
import { version } from "src/../package.json";

import Logo from "src/assets/images/logo.svg";
import MiniLogo from "src/assets/images/mini-logo.svg";
import LogoSoftparLight from "src/assets/softpar_logo_light.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 $q = useQuasar();
const { t, te } = useI18n();
const menuLabel = (label) => (te(label) ? t(label) : label);

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([]);

watchEffect(() => {
  if ($q.screen.lt.md) {
    miniState.value = true;
    isExpasionItemExpanded.value.forEach((expansion, index) => {
      isExpasionItemExpanded.value[index] = false;
    });
  }
});

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>
@import "/src/css/quasar.variables.scss";

.menu-selected {
  background-color: $terciary;
  color: $primary;
}

.financial-submenu :deep(.q-item) {
  color: $secondary;
}

.financial-submenu :deep(.q-item.menu-selected) {
  background-color: rgba($secondary, 0.14);
  color: $secondary;
}

.toggle-button-wrapper {
  transition: transform 0.3s ease;
}

.toggle-button-wrapper:hover {
  transform: scale(1.1);
}

.q-drawer-container {
  background-image: url("/images/background-opacity.png");
  background-position: 15%;
}

.menu-scroll {
  min-height: 0;
}

.menu-scroll :deep(.q-scrollarea__bar--v) {
  width: 6px;
  right: 2px;
  border-radius: 6px;
}
</style>
