<template>
  <div class="mx-auto px-4 h-14">
    <div class="flex justify-between items-center h-full">
      <figure>
          <DspLogo />
      </figure>
      <div class="flex justify-between items-center" v-show="showMember">
        <button class="btn btn-sm btn-neutral mr-2" @click.prevent="logOutButton">
          Logout
        </button>
        <!-- <figure>
          <router-link :to="'/member-area'">
            <IconMember class="w-8 h-8 fill-neutral-500"/>
          </router-link>
        </figure> -->
      </div>
    </div>
  </div>
</template>

<script>
import { storeToRefs } from 'pinia';
import loginStore from '@/stores/login.js';
import DspLogo from '@/components/icons/DspLogo.vue';
import IconMember from '@/components/icons/IconMember.vue';
import AllMapDataStore from '@/stores/allMapData.js';
import ConformanceStore from '@/stores/conformance.js';
import { leaveFilter, leaveConformance } from '@/module/alertModal.js';

export default {
  data() {
    return {
      showMember: false,
    }
  },
  setup() {
    const store = loginStore();
    const { logOut } = store;
    const allMapDataStore = AllMapDataStore();
    const conformanceStore = ConformanceStore();
    const { tempFilterId, temporaryData, postRuleData, ruleData } = storeToRefs(allMapDataStore);
    const { conformanceLogTempCheckId, conformanceFilterTempCheckId, conformanceFileName } = storeToRefs(conformanceStore);

    return { logOut, temporaryData, tempFilterId, postRuleData, ruleData, conformanceLogTempCheckId, conformanceFilterTempCheckId, allMapDataStore, conformanceStore, conformanceFileName }
  },
  components: {
    DspLogo,
    IconMember
  },
  methods: {
    logOutButton() {
      if ((this.$route.name === 'Map' || this.$route.name === 'CheckMap') && this.tempFilterId) {
        // 傳給 Map，通知 Sidebar 要關閉。
        this.$emitter.emit('leaveFilter', false);
        leaveFilter(false, this.allMapDataStore.addFilterId, false, this.logOut)
      } else if((this.$route.name === 'Conformance' || this.$route.name === 'CheckConformance') && (this.conformanceLogTempCheckId || this.conformanceFilterTempCheckId)) {
        leaveConformance(false, this.conformanceStore.addConformanceCreateCheckId, false, this.logOut)
      } else this.logOut();
    },
  },
  mounted() {
    this.$route.name === 'Login' || this.$route.name === 'NotFound404' ? this.showMember = false : this.showMember = true;
  }
}

</script>
