<script setup lang="ts">
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';
import { Icon } from '@iconify/vue';

const router = useRouter();

const currentRoute = ref<string>('');
const currentPath = computed(() => {
  return router.currentRoute.value.path;
});

const labelMenu = ref<
  { label: string; icon: string; route: string; disabled?: boolean }[]
>([
  {
    label: 'drawerDashboard',
    icon: 'mage:dashboard',
    route: '',
    disabled: true,
  },
  {
    label: 'drawerBranchManagement',
    icon: 'mdi-sitemap-outline',
    route: '/branch-management',
  },
  {
    label: 'drawerPersonnelManagement',
    icon: 'mdi:account-settings-outline',
    route: '/personnel-management',
  },
  {
    label: 'drawerCustomerManagement',
    icon: 'mdi-account-settings-outline',
    route: '/customer-management',
  },
  {
    label: 'drawerProductsAndServices',
    icon: 'raphael:package',
    route: '/product-service',
  },
  {
    label: 'drawerQuotation',
    icon: 'raphael:package',
    route: '',
    disabled: true,
  },
  {
    label: 'drawerRequestList',
    icon: 'raphael:package',
    route: '',
    disabled: true,
  },
  {
    label: 'drawerWorkOrder',
    icon: 'raphael:package',
    route: '',
    disabled: true,
  },
  {
    label: 'drawerInvoice',
    icon: 'raphael:package',
    route: '',

    disabled: true,
  },
  {
    label: 'drawerAccountingLedger',
    icon: 'mdi-account-cash-outline',
    route: '',
    disabled: true,
  },
  {
    label: 'drawerReport',
    icon: 'mdi-file-chart-outline',
    route: '',
    disabled: true,
  },
]);

const leftDrawerOpen = defineModel<boolean>('leftDrawerOpen', {
  default: false,
});

function navigateTo(label: string, destination: string) {
  currentRoute.value = label;
  router.push(`${destination}`);
}
</script>

<template>
  <!-- Drawer -->
  <q-drawer
    v-model="leftDrawerOpen"
    side="left"
    :breakpoint="599"
    :width="$q.screen.lt.sm ? $q.screen.width - 16 : 256"
  >
    <div
      class="column items-center justify-center q-pa-xl cursor-pointer"
      @click="$router.push('/')"
      id="btn-drawer-home"
    >
      <q-img src="/logo.png" style="width: 80%; height: 70%" />
    </div>

    <div id="drawer-menu" class="q-pr-sm">
      <q-item
        v-for="v in labelMenu"
        :key="v.label"
        clickable
        :disable="!!v.disabled"
        @click="navigateTo(v.label, v.route)"
        class="no-padding"
        :class="{ active: currentPath === v.route, dark: $q.dark.isActive }"
      >
        <q-item-section id="btn-drawer-back ">
          <q-item-label class="q-pl-lg row items-center">
            <div class="box-border-left" />
            <Icon :icon="v.icon" width="24px" class="q-mr-md" />
            {{ $t(v.label) }}
          </q-item-label>
        </q-item-section>
      </q-item>
    </div>
  </q-drawer>
</template>

<style lang="scss" scoped>
#drawer-menu :deep(.q-item) {
  color: var(--gray-6);
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
#drawer-menu :deep(.q-item.active) {
  --_drawer-item-background-color: var(--brand-1) !important;
  background-color: var(--_drawer-item-background-color);
  color: white;
  border-left: 10px solid $secondary;

  &.dark {
    --_drawer-item-background-color: var(--gray-10) !important;
    border: 1px solid var(--brand-1);
    border-left: 10px solid $secondary;
    .box-border-left {
      position: absolute;
      width: 10px;
      background: $secondary;
      height: 48.5px;
      top: -1px;
      left: -10px;
    }
  }
}

:deep(.q-drawer) {
  background-color: transparent;
  padding: var(--size-4);
  padding-right: 0;
}

:deep(.q-drawer__content) {
  border-radius: var(--radius-2);
  background: var(--surface-1);
  border: 1px solid var(--border-color);
}
</style>
