<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { CCMDIcon, CCPankuzu } from '../../index'

const props = defineProps<{
  items: {
    text: string
    path?: string
  }[]
  userName: string
}>()

const emit = defineEmits<{
  (e: 'logout'): void
}>()

//ログアウトボタン初期値
const isDisplayLogoutPanel = ref<boolean>(false)

const displayLogout = () => {
  isDisplayLogoutPanel.value = !isDisplayLogoutPanel.value
}

const hideLogout = () => {
  isDisplayLogoutPanel.value = false
}

function logout() {
  emit('logout')
}

onMounted(() => {
  // 外側をクリックした時にメニューを閉じる
  document.addEventListener('click', e => {
    if (!(e.target as Element).closest('#menuPanel') && isDisplayLogoutPanel.value) hideLogout()
  })
})
</script>

<template>
  <header class="main-header">
    <CCPankuzu :items="items"></CCPankuzu>
    <div class="header-right cursor-pointer" @click="displayLogout" id="menuPanel">
      <div>{{ userName }}</div>
      <CCMDIcon
        name="expand_more"
        class="arrow"
        :class="{
          'arrow-rotate-move': isDisplayLogoutPanel,
          'arrow-rotate-move-reverse': !isDisplayLogoutPanel,
        }"
      />

      <Transition name="logoutFade">
        <div v-if="isDisplayLogoutPanel" id="logoutPanel" class="logout-panel" @click="logout">
          <div class="logout-title">
            <CCMDIcon name="directions_walk" class="directions-walk-icon" /> ログアウト
          </div>
        </div>
      </Transition>
    </div>
  </header>
</template>

<style lang="sass" scoped>
.main-header
  position: relative
  z-index: 100
  height: 60px
  // width: calc(100vw - 285px)
  display: flex
  align-items: center
  justify-content: start
  padding: 0 35px
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px
  color: var(--pm-text-black)

.header-right
  display: flex
  margin-left: auto
  align-items: center

.arrow
  font-size: 35px
  transform: rotate(180deg)

.cursor-pointer
  cursor: pointer

.arrow-rotate-move
  transform: rotate(0deg)
  transition-duration: 0.5s

.arrow-rotate-move-reverse
  transform: rotate(180deg)
  transition-duration: 0.5s

.logout-panel
  position: absolute
  box-shadow: rgba(99, 99, 99, 0.2) 0px 0px 8px 1px
  background-color: var(  --c-primary)
  height: 50px
  width: 250px
  top: 50px
  right:0px
  display: flex
  align-items: center
  justify-content: flex-start

.logout-title
  display: flex
  padding-left: 27.6px
  color: var(--pm-text-white)

.directions-walk-icon
  padding-right: 14.4px
  color: var(--pm-text-white)

.logout-title:hover
  opacity: 0.7
  transition: 1s
  cursor: pointer

// ログアウトボタントランジション用CSS
.logoutFade-enter-active, .logoutFade-leave-active
  transition: opacity 0.3s ease

.logoutFade-enter-from, .logoutFade-leave-to
  opacity: 0

.logoutFade-enter-to, .logoutFade-leave-from
  opacity: 1
</style>
