<script setup>
import { onMounted, ref, watch, computed, inject } from "vue";
import { AUTHPAGES } from "@/constant";
import { getAllSysSidebar } from "@/apis/building";
import useBuildingStore from "@/stores/useBuildingStore";
import useUserInfoStore from "@/stores/useUserInfoStore";
import { twMerge } from "tailwind-merge";

const store = useUserInfoStore();

const buildingStore = useBuildingStore();

const alerts = inject("app_alerts");
const alarmslength = computed(() => (alerts?.value || []).length);

const authPages = computed(() =>
  store.auth_page.filter(({ showView }) => showView)
);

const open = ref(false);
const getSubMonitorPage = async (building) => {
  const res = await getAllSysSidebar();
  buildingStore.mainSubSys = res.data.history_Main_Systems;
};

watch(
  () => buildingStore.selectedBuilding,
  (newVal) => {
    if (newVal !== null) {
      getSubMonitorPage(newVal.building_tag);
    }
  }
);
</script>
<template>
  <ul class="px-1 menu-box my-2">
    <li
      v-for="page in authPages"
      class="flex flex-col items-center justify-center"
    >
      <router-link
        v-if="$route.path !== page.navigate"
        :to="page.navigate"
        type="link"
        class="flex flex-col justify-center items-center btn-group"
      >
        <font-awesome-icon
          :icon="['fas', page.icon]"
          size="2x"
          :class="
            twMerge(
              'menu-icon',
              page.showView === 'alert' && alarmslength > 0
                ? 'text-red-500 animate-pulse'
                : 'text-white'
            )
          "
        />
        <span
          :class="
            twMerge(
              page.showView === 'alert' && alarmslength > 0
                ? 'text-red-200'
                : 'text-white'
            )
          "
        >
          {{ page.subName }}
        </span>
      </router-link>
      <div
        v-else
        class="flex flex-col justify-center items-center btn-group router-link-active cursor-pointer"
      >
        <font-awesome-icon
          :icon="['fas', page.icon]"
          size="2x"
          :class="
            twMerge(
              'menu-icon',
              page.showView === 'alert' && alarmslength > 0
                ? 'text-red-500 animate-pulse'
                : ''
            )
          "
        /><span
          :class="
            twMerge(
              page.showView === 'alert' && alarmslength > 0
                ? 'text-red-200'
                : ''
            )
          "
        >
          {{ page.subName }}
        </span>
      </div>
    </li>
  </ul>
</template>
<style lang="css" scoped>
.router-link-active {
  color: #7cedc1;
}
</style>
