<template>
  <q-drawer
    v-bind="$attrs"
    :model-value="true"
    show-if-above
    no-swipe-close
    no-swipe-open
    :width="300"
    :mini-width="64"
    :breakpoint="500"
    :mini="miniState"
    :behavior="'desktop'"
    class="detached-container bg-surface"
  >
    <div class="column full-height q-pa-sm no-wrap">
      <div v-if="!$q.screen.lt.md" class="toggle-button-wrapper">
        <q-btn
          class="toggle-button"
          flat
          round
          size="md"
          padding="10px"
          @click="miniState = !miniState"
        >
          <q-icon
            :name="miniState ? 'mdi-chevron-right' : 'mdi-chevron-left'"
            size="32px"
          />
          <q-tooltip
            anchor="center right"
            self="center left"
            :offset="[10, 10]"
            >{{
              miniState
                ? $t("ui.navigation.expand_menu")
                : $t("ui.navigation.collapse_menu")
            }}</q-tooltip
          >
        </q-btn>
      </div>

      <q-list class="column q-mb-md no-wrap" style="border-radius: 6px">
        <q-item v-ripple clickable :class="miniState ? '' : 'q-pa-none'">
          <div class="flex full-width">
            <img
              :src="
                miniState
                  ? 'images/kizzo_left_logo.png'
                  : 'images/kizzo_expanded_logo.png'
              "
              alt="avatar"
              class="full-width"
            />
          </div>
        </q-item>
      </q-list>

      <q-list class="column no-wrap" style="border-radius: 10px">
        <template v-for="item in navigationItems" :key="item.name">
          <template v-if="item.permission">
            <q-item
              v-if="item.type === 'single'"
              v-ripple
              clickable
              exact-active-class="menu-selected"
              exact
              active-class="menu-selected"
              style="border-radius: 4px"
              :to="{ name: item.name }"
              class="q-my-xs"
            >
              <q-item-section v-if="item.icon" avatar>
                <q-icon :name="item.icon" style="font-size: 24px" />
              </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>
            <div v-else>
              <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"
                  header-class="menu-item--spaced"
                  :class="{
                    'menu-selected':
                      childrenAreActive(item.children) &&
                      !isExpasionItemExpanded,
                  }"
                  class="menu-item--spaced"
                >
                  <template #header>
                    <q-item-section avatar>
                      <q-icon :name="item.icon" style="font-size: 24px" />
                    </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="menu-item--spaced"
                    >
                      <q-item-section v-if="child.icon" avatar>
                        <q-icon :name="child.icon" style="font-size: 18px" />
                      </q-item-section>
                      <q-item-section class="q-px-md">{{
                        $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-item--spaced"
                >
                  <q-item-section avatar>
                    <q-icon :name="item.icon" style="font-size: 18px" />
                  </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 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"
                      >
                        <q-item-section avatar>
                          <q-icon :name="child.icon" style="font-size: 18px" />
                        </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="q-mt-auto">
        <q-btn
          :label="miniState ? '' : 'Sair'"
          flat
          class="full-width"
          icon-right="mdi-location-exit"
          @click="logoutFn"
        >
        </q-btn>
        <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; max-width: 114px"
            />
          </div>
        </q-item>
      </q-list>
      <div
        class="full-width text-center text-subtitle3 cursor-pointer"
        @click="$router.push('/version')"
      >
        <span class="text-caption text-weight-light">{{ version }}</span>
      </div>
    </div>
  </q-drawer>
</template>
<script setup>
import { ref, watch, watchEffect } from "vue";
import { useAuth } from "src/composables/useAuth";
import { useRouter, useRoute } from "vue-router";
import { navigationStore } from "src/stores/navigation";
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";
import { Cookies } from "quasar";
import { useQuasar } from "quasar";
import { version } from "../../../package.json";

const $q = useQuasar();
const { logout } = useAuth();
const router = useRouter();
const route = useRoute();
const { navigationItems } = navigationStore();

const miniState = ref(Cookies.get("miniState") === "true" ?? false);

const childrenAreActive = (children) => {
  if (!children) return false;
  return children.some((child) => {
    return route.path.includes(child.path);
  });
};

const expandedItems = ref({});

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

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

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

watch(miniState, () => {
  Cookies.set("miniState", miniState.value);
});
</script>

<style lang="scss" scoped>
@import "/src/css/quasar.variables.scss";
.text-subtitle3 {
  font-size: 1.1rem !important;
  font-weight: 400 !important;
}

.menu-selected {
  background-color: rgba($secondary, 1);
  color: $primary;
}

.toggle-button-wrapper {
  position: absolute;
  top: 50dvh;
  right: -28px;
  z-index: 2;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}

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

.menu-item--spaced {
  margin-top: 5px;
  margin-bottom: 5px;
}

:deep(.q-drawer) {
  box-shadow: none !important;
}
</style>
