<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 { logoutLeave } from '@/module/alertModal.js';

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

    return { logOut, temporaryData, tempFilterId, postRuleData, ruleData, allMapDataStore}
  },
  components: {
    DspLogo,
    IconMember
  },
  methods: {
    logOutButton() {
      if (this.$route.name === 'Map' && this.$route.params.type === 'log') {
        this.tempFilterId = null;
        this.temporaryData = [];
        this.postRuleData = [];
        this.ruleData = [];
      };
      this.logOut();
    },
  },
  mounted() {
    this.$route.name === 'Login' || this.$route.name === 'NotFound404' ? this.showMember = false : this.showMember = true;
  }
}

</script>
