<script setup lang="ts">
import { ref, watch } from 'vue';
import { useLocale } from 'vuetify';
import { ROUTES } from '@/constants/routes';

const props = defineProps({
  drawer: Boolean,
});
const emits = defineEmits(['change']);

const { t } = useLocale();

const modelValue = ref<boolean>(props.drawer);

watch(props, (v: any, _) => {
  modelValue.value = v.drawer;
});

function change(e: boolean) {
  emits('change', e);
}
</script>

<template>
  <v-navigation-drawer
    v-model="modelValue"
    class="pt-3 elevation-0 border-r"
    :scrim="false"
    close-on-click
    @update:modelValue="change"
  >
    <v-list-item
      v-for="(item, i) in ROUTES"
      :key="i"
      :value="item"
      color="primary"
      :to="item.value"
      @click="change(false)"
    >
      <template v-slot:prepend>
        <span class="mso mr-3">{{ item.icon }}</span>
      </template>

      <v-list-item-title>{{ t(item.title) }}</v-list-item-title>

      <template v-slot:append>
        <v-menu
          v-if="item.children?.length"
          open-on-hover
          close-on-click
          :open-delay="0"
          :close-delay="0"
          transition="none"
        >
          <template v-slot:activator="{ props }">
            <span class="mso" v-bind="props">chevron_right</span>
          </template>

          <v-list class="accent-modal" elevation="0" density="compact">
            <v-list-item
              v-for="(c, cIndex) in item.children"
              :key="cIndex"
              :title="t(c.title)"
              :to="c.value"
              :active="false"
              class="cm-mini"
              @click="change(false)"
            ></v-list-item>
          </v-list>
        </v-menu>
      </template>
    </v-list-item>
  </v-navigation-drawer>
</template>
