<script setup>
import { computed, ref } from 'vue'
import MDIcon from '../MDIcon/MDIcon.vue'
const props = defineProps({
  /**
   * Headerのアカウント名表示欄
   * @example p_AccountName: 'text'
   */
  p_AccountName: { type: String, default: '' },
  /**
   * !必須 required
   * サブメニュー展開時の表示ボタン
   * @example p_MenuList: [
   *  {
   *    icon: 'directions_walk', // materilal iconのフォント名
   *    text: 'ログアウト',       // アクションに表示するテキスト
   *    handler: () => {         // メソッド
   *      alert('logout')
   *    },
   *    visible: true,           // 表示判定
   *  },
   *]
   */
  p_MenuList: {
    type: Array,
    default: () => [
      {
        icon: '',
        text: '',
        handler: () => {},
        visible: true,
      },
    ],
  },
  /**
   * パンくずリストの表示テキスト
   * @example p_Pankuzu: 'ログアウト'
   */
  p_Pankuzu: { type: Array, default: () => ['', ''] },
  /**
   * メニューホバー時のカラー
   * @example p_MenuColor: 'primary'
   */
  p_MenuColor: {
    type: String,
    default: 'normal',
    validator: (val) =>
      [
        'normal',
        'primary',
        'secondary',
        'negative',
        'positive',
        'accent',
        'dark',
        'negative',
        'info',
      ].includes(val),
  },
})
// submenuの表示する矢印の向きの初期値
const arrowOpen = ref(true)

// visibleを元に表示する項目の抽出
const actionExtracted = computed(() => {
  return props.p_MenuList.filter((cont) => cont.visible)
})

// Buttoniconをクリックした際の処理
const clickBtn = () => {
  arrowOpen.value = !arrowOpen.value
}
// サブメニュー展開時にクリックした要素がサブメニュー以外の場合、サブメニューを閉じる
window.addEventListener('click', (e) => {
  if (!e.target.closest('._header_subMenu') && !arrowOpen.value) {
    arrowOpen.value = true
  }
})
</script>

<template>
  <header class="_header_desgin">
    <!-- カードヘッダー共通 -->
    <div class="_pankuzu_area">
      <div v-for="(item, index) in p_Pankuzu" :key="item">
        {{ item }}
        <MDIcon
          v-if="index !== p_Pankuzu.length - 1"
          name="chevron_right"
          :p_PointerCursor="false"
          class="_c_material"
        />
      </div>
    </div>
    <slot></slot>

    <button :class="`_header_subMenu`" @click="clickBtn">
      <!-- カードヘッダータイトル -->
      <div class="_header_title">
        {{ p_AccountName }}
      </div>
      <!-- カードヘッダーボタン -->
      <div :class="arrowOpen ? '_icon_btn' : '_arrowOpen _icon_btn'">
        <!-- アイコンの内容を変更（google fontsのアイコンを使用） -->
        <MDIcon name="expand_more" class="_c_material" />
      </div>
      <!-- sabMenu展開時 -->
      <div v-show="!arrowOpen" class="_subMenu_contents">
        <!-- p_MenuList内の各項目を抽出して当てはめる -->
        <button
          v-for="subMenu in actionExtracted"
          :key="subMenu.text"
          :class="`_subMenu_button _type_${p_MenuColor}`"
          @click="subMenu.handler"
        >
          <MDIcon :name="subMenu.icon" class="_c_material" />
          <span class="_subMenu_text">{{ subMenu.text }}</span>
        </button>
      </div>
    </button>
  </header>
</template>

<style lang="sass">

  // ドラッグ無効
._header_subMenu,
._subMenu_contents,
._subMenu_button,
._c_material
  user-select: none

//-----------------------------------------------------------
// header関係
//-----------------------------------------------------------
// headerのデザイン
._header_desgin
  width: 100%
  display: flex
  height: 64px
  box-shadow: 0 1px 5px rgb(0 0 0 / 20%), 0 2px 2px rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%)
  font-size: 16px
  background: #ffffff

// パンくずリストの表示
._pankuzu_area
  margin: 0 auto 0 25px
  display: flex
  align-items: center
  color: #707070

// パンくずリスト内のアイコン
._pankuzu_area ._c_material
  font-size:24px
  margin-right: 6px

//-----------------------------------------------------------
// subMenu関係
//-----------------------------------------------------------
// カードヘッダー共通
._header_subMenu
  position: relative
  cursor: pointer
  outline: 0
  text-align: center
  align-items: center
  padding: 4px 16px
  display: flex
  background: none
  border: none
  border-radius: 3px
  color: #707070

._header_subMenu:hover
  background: #f0f0f0
// カードヘッダータイトル
._header_title
  width: 100%
  font-size: inherit
  text-transform: uppercase
  font-size: 16px

// ---------------------------------------------------------------------------
// dorpdownボタンのデザイン
// ---------------------------------------------------------------------------
  // header内サブメニューのアイコン
._icon_btn
  line-height: 0.8
  position: relative
  background: transparent
  border: none
  border-radius: 50%
  box-shadow: none
  padding: 0px
  margin-left: auto
  // font-size: inherit
  color: inherit
  margin-left:8px
  transition: 0.28s

// header内サブメニューの回転
._arrowOpen
  transform: rotate(0.5turn)


// ---------------------------------------------------------------------------
// アイコンのサイズ、配置など
// ---------------------------------------------------------------------------
._c_material
  font-size: 27.44px
  color: inherit
  display: inline-flex
  align-items: center
  justify-content: center
  vertical-align: middle

// ---------------------------------------------------------------------------
// サブメニュー展開時
// ---------------------------------------------------------------------------
// サブメニュー展開時の外装
._subMenu_contents
  position: absolute
  top: 64px
  right: 0
  color: inherit
  width: 265px
  border: none
  box-shadow: 0 1px 5px rgb(0 0 0 / 20%), 0 2px 2px rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%)

// サブメニュー展開時のbutton
._subMenu_button
  text-align: left
  height: 50px
  padding-left: 5px
  width: 100%
  padding: 4px 16px
  color: #707070
  border: none
  background: #ffffff
  border-radius: 3px
  cursor: pointer

// サブメニュー展開時の表示アイコン
._subMenu_button ._c_material
  font-size: 18px

// サブメニュー展開時のボタン内テキスト
._subMenu_text
  margin: 0 auto 2px 10px
  font-weight: 600

// ---------------------------------------------------------------------------
// 疑似クラス（hover,activなど）
// ---------------------------------------------------------------------------
._subMenu_button:hover,
._hover_effect:focus-visible
  color: #ffffff
  &._type_normal
    background: #000000

  &._type_primary
    background: var(--q-primary, #3c4d58)

  &._type_secondary
    background: var(--q-secondary, #3c4d58)

  &._type_positive
    background: var(--q-positive, #3c4d58)

  &._type_negative
    background: var(--q-negative, #3c4d58)

  &._type_accent
    background: var(--q-accent, #f2961c)
  &._type_dark
    background: var(--q-dark, #f2961c)
  &._type_negative
    background: var(--q-negative, #f2961c)
  &._type_info
    background: var(--q-info, #f2961c)
</style>
