<template>
  <div id="header.vue" class="mx-auto px-4 h-14 z-50">
    <div class="flex justify-between items-center h-full">
      <figure>
        <DspLogo />
      </figure>
      <div
        class="flex justify-between items-center relative"
        v-show="showMember"
      >
        <span id="acct_mgmt_button">
          <img
            v-if="!isHeadHovered"
            src="@/assets/icon-head-black.svg"
            @mouseenter="isHeadHovered = true"
            width="32"
            height="32"
            @click="toggleIsAcctMenuOpen"
            class="cursor-pointer z-50"
            alt="user-head"
          />
          <img
            v-else
            src="@/assets/icon-head-blue.svg"
            @mouseleave="isHeadHovered = false"
            width="32"
            height="32"
            @click="toggleIsAcctMenuOpen"
            class="cursor-pointer z-50"
          alt="user-head"
          />
        </span>
      </div>
    </div>
  </div>
</template>

<script setup>
// The Lucia project.
// Copyright 2023-2026 DSP, inc.  All rights reserved.
// Authors:
//   chiayin.kuo@dsp.im (chiayin), 2023/1/31
//   cindy.chang@dsp.im (Cindy Chang), 2024/5/30
//   imacat.yang@dsp.im (imacat), 2023/9/23
/**
 * @module components/Header Application header with DSP logo and
 *   user account menu toggle button.
 */

import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { storeToRefs } from "pinia";
import emitter from "@/utils/emitter";
import { useLoginStore } from "@/stores/login";
import { useAcctMgmtStore } from "@/stores/acctMgmt";
import DspLogo from "@/components/icons/DspLogo.vue";
import { useAllMapDataStore } from "@/stores/allMapData";
import { useConformanceStore } from "@/stores/conformance";
import { leaveFilter, leaveConformance } from "@/module/alertModal.js";

const route = useRoute();

const store = useLoginStore();
const { logOut } = store;
const allMapDataStore = useAllMapDataStore();
const conformanceStore = useConformanceStore();
const acctMgmtStore = useAcctMgmtStore();
const { tempFilterId, temporaryData, postRuleData, ruleData } =
  storeToRefs(allMapDataStore);
const {
  conformanceLogTempCheckId,
  conformanceFilterTempCheckId,
  conformanceFileName,
} = storeToRefs(conformanceStore);

const isHeadHovered = ref(false);
const showMember = ref(false);

const toggleIsAcctMenuOpen = () => {
  acctMgmtStore.toggleIsAcctMenuOpen();
};

/**
 * Handles logout with unsaved-changes confirmation for Map
 * and Conformance pages.
 */
function logOutButton() {
  if (
    (route.name === "Map" || route.name === "CheckMap") &&
    tempFilterId.value
  ) {
    // Notify Map to close the Sidebar.
    emitter.emit("leaveFilter", false);
    leaveFilter(false, allMapDataStore.addFilterId, false, logOut);
  } else if (
    (route.name === "Conformance" || route.name === "CheckConformance") &&
    (conformanceLogTempCheckId.value || conformanceFilterTempCheckId.value)
  ) {
    leaveConformance(
      false,
      conformanceStore.addConformanceCreateCheckId,
      false,
      logOut,
    );
  } else {
    logOut();
  }
}

onMounted(() => {
  if (route.name === "Login" || route.name === "NotFound404") {
    showMember.value = false;
  } else {
    showMember.value = true;
  }
});
</script>
