<script setup lang="ts">
import { computed, ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { storeToRefs } from 'pinia';
import { Icon } from '@iconify/vue';
import useMyBranch from 'stores/my-branch';
import { getUserId, getRole } from 'src/services/keycloak';

defineProps<{
  mini?: boolean;
}>();

const role = ref();

onMounted(async () => {
  const uid = getUserId();
  role.value = getRole();

  if (!uid) return;

  if (role.value.includes('system')) {
    const result = await userBranch.fetchListOptionBranch();
    if (result && result.total > 0) currentMyBranch.value = result.result[0];
  }
  const result = await userBranch.fetchListMyBranch(uid);
  if (result && result.total > 0) currentMyBranch.value = result.result[0];

  labelMenu.value = [
    {
      label: 'menu.dashboard',
      icon: 'isax-element-35',
      route: '',
      isax: true,
      disabled: true,
    },
    {
      label: 'menu.branch',
      icon: 'mdi-chart-donut',
      route: '/branch-management',
      hidden:
        role.value.includes('admin') ||
        role.value.includes('branch_admin') ||
        role.value.includes('head_of_admin') ||
        role.value.includes('system') ||
        role.value.includes('owner') ||
        role.value.includes('head_of_account')
          ? false
          : true,
    },
    {
      label: 'menu.user',
      icon: 'fa6-solid:building-user',
      route: '/personnel-management',
      hidden:
        role.value.includes('admin') ||
        role.value.includes('branch_admin') ||
        role.value.includes('head_of_admin') ||
        role.value.includes('system') ||
        role.value.includes('owner') ||
        role.value.includes('branch_manager')
          ? false
          : true,
    },
    {
      label: 'menu.customer',
      icon: 'isax-frame5',
      route: '/customer-management',
      isax: true,
    },
    {
      label: 'menu.product',
      icon: 'heroicons-truck-solid',
      route: '/product-service',
    },
    {
      label: 'menu.dms',
      icon: 'mdi-folder-file',
      route: '/document-management',
    },
    {
      label: 'menu.quotation',
      icon: 'mdi-file-document',
      route: '/quotation',
      disabled: false,
    },
    {
      label: 'menu.requestList',
      icon: 'isax-device-message5',
      route: '',
      disabled: true,
      isax: true,
    },
    {
      label: 'menu.workOrder',
      icon: 'isax-receipt-2-15',
      route: '',
      disabled: true,
      isax: true,
    },
    {
      label: 'menu.invoice',
      icon: 'material-symbols:box',
      route: '',
      disabled: true,
    },
    {
      label: 'menu.accountingLedger',
      icon: 'isax-dollar-circle4',
      route: '',
      isax: true,
      disabled: true,
    },
    {
      label: 'menu.report',
      icon: 'mdi-file-document',
      route: '',
      disabled: true,
    },
  ];
});

const router = useRouter();
const userBranch = useMyBranch();
const { currentMyBranch } = storeToRefs(userBranch);

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

const labelMenu = ref<
  {
    label: string;
    icon: string;
    route: string;
    hidden?: boolean;
    disabled?: boolean;
    isax?: boolean;
  }[]
>([]);

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

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

function branchSetting() {}
</script>

<template>
  <!-- Drawer -->
  <q-drawer
    no-swipe-open
    v-model="leftDrawerOpen"
    side="left"
    :breakpoint="599"
    class="column justify-between no-wrap"
    :class="{ dark: $q.dark.isActive }"
    :width="mini ? 80 : 256"
    show-if-above
  >
    <!-- :width="$q.screen.lt.sm ? $q.screen.width - 16 : 256" -->
    <div class="scroll" style="overflow-x: hidden; scrollbar-gutter: stable">
      <div
        class="flex justify-center items-center q-pl-sm cursor-pointer"
        @click="$router.push('/')"
        id="btn-drawer-home"
        style="height: 128px"
      >
        <q-img
          fit="contain"
          :src="mini ? 'logo_jws.png' : '/logo.png'"
          :style="{ filter: `brightness(${$q.dark.isActive ? '1.3' : '1'})` }"
          style="height: 64px"
        />
      </div>

      <div id="drawer-menu" class="q-pl-md q-mr-xs">
        <q-item
          v-for="v in labelMenu.filter((v) => !v.hidden)"
          :id="`drawer-${v.label}`"
          dense
          clickable
          class="row items-center q-my-xs q-px-xs q-py-sm"
          :key="`drawer-${v.label}`"
          :disable="!!v.disabled"
          :class="{
            active: currentPath === v.route,
            'border-active': currentPath === v.route,
            dark: $q.dark.isActive,
          }"
          @click="navigateTo(v.label, v.route)"
        >
          <div class="row justify-center items-center">
            <i
              v-if="v.isax"
              :class="`isax ${v.icon}`"
              style="font-size: 24px"
            />
            <Icon v-else :icon="v.icon" width="24px" />
            <q-tooltip v-if="mini">
              {{ $t(v.label) }}
            </q-tooltip>
          </div>

          <div v-if="!mini" class="q-ml-md" style="white-space: nowrap">
            {{ $t(v.label) }}
          </div>
        </q-item>
      </div>
    </div>

    <div
      class="surface-2 q-px-md q-py-sm row items-center no-wrap justify-start"
      :class="{ 'justify-center': mini }"
      style="min-height: 56px; overflow-x: hidden"
    >
      <q-avatar
        text-color="white"
        size="md"
        :style="`background-color: hsla(var(--violet-${$q.dark.isActive ? '10' : '11'}-hsl)/0.15)`"
        class="relative-position"
      >
        <q-icon
          name="mdi-home-group"
          size="sm"
          :style="`color: var(--violet-${$q.dark.isActive ? '10' : '11'})`"
        />
        <div class="dot absolute-bottom-right" />
      </q-avatar>

      <div
        v-if="!mini"
        class="text-caption column q-mx-md col"
        style="white-space: nowrap"
      >
        <span class="text-weight-bold ellipsis full-width">
          {{
            ($i18n.locale === 'eng'
              ? currentMyBranch?.nameEN
              : currentMyBranch?.name) ?? '-'
          }}
          <q-tooltip>
            {{
              ($i18n.locale === 'eng'
                ? currentMyBranch?.nameEN
                : currentMyBranch?.name) ?? '-'
            }}
          </q-tooltip>
        </span>
        <span>
          {{ currentMyBranch?.code ?? '-' }}
        </span>
      </div>

      <q-btn
        v-if="!mini"
        dense
        flat
        rounded
        icon="mdi-cog-outline"
        size="sm"
        @click="branchSetting"
        style="margin-left: auto"
      />
    </div>
  </q-drawer>
</template>

<style lang="scss" scoped>
#drawer-menu :deep(.q-item) {
  color: var(--gray-7);
  border-radius: var(--radius-2);

  &.dark {
    color: var(--gray-3);
  }
}

#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;
}

#drawer-menu :deep(.q-item.active)::before {
  display: block;
  position: absolute;
  content: ' ';
  background: var(--brand-2);
  border-radius: 99rem;
  width: 6px;
  left: -0.6rem;
  top: 18%;
  bottom: 18%;
  cursor: context-menu;
}

:deep(.q-drawer) {
  transition: 0.1s width ease-in-out;
  background-color: transparent;
  padding: var(--size-4);
  padding-right: 0;
}

:deep(.q-drawer__content) {
  border-radius: var(--radius-2);
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(11.2px);
  -webkit-backdrop-filter: blur(11.2px);

  &.dark {
    background-color: hsla(var(--gray-10-hsl) / 0.5);
  }
}

.dot {
  height: 10px;
  width: 10px;
  background-color: var(--teal-6);
  border-radius: 50%;
  display: inline-block;
  border: 1.5px solid white;
}
</style>
