<script setup lang="ts">
import { ref, PropType, computed, watch, onMounted } from 'vue'
import { CCMDIcon } from '../../index'
import { SubjectType } from './CCGlobalNavi.types'
import { copy } from 'copy-anything'
import { defaultData } from './default'
import { MDIconTypes } from '../../types'

const props = defineProps({
  /**
   * FullPath
   * @example '/test'
   */
  fullPath: {
    type: String,
    default: '/',
  },
  /**
   * グローバルナビ主題
   * @example []
   */
  subjects: {
    type: Array as PropType<SubjectType[]>,
    default: defaultData,
  },
})

const emit = defineEmits<{
  (e: 'update:fullPath', value: string): void
  (e: 'push', value: string): void
}>()
const fullPath = computed({
  get: () => props.fullPath,
  set: (value) => {
    emit('update:fullPath', value)
  },
})

//どこのメインメニューを選択しているかの入れ子
const holdIndex = ref(0)
// pathがどこの階層にあるかを判定して、選択中subjectとsubの情報を更新する
const getNaviAddress = (path: string, route: SubjectType[]) => {
  const pathArr = path.split('/')
  const pathName = pathArr[pathArr.length - 1]
  route.map((menu, menuIndex) => {
    //サブメニューがある場合
    if (menu.subtitle.length) {
      menu.subtitle.map((sub, subindex) => {
        if (sub.path === `/${pathName}`) {
          holdIndex.value = menuIndex
        }
      })
    } else {
      //サブメニューがない場合
      if (menu.path === `/${pathName}`) {
        holdIndex.value = menuIndex
      }
    }
  })
}
//computedでinfoの変動監視
const subjectsComp = ref(copy(props.subjects))
watch(
  () => props.subjects,
  () => {
    subjectsComp.value = copy(props.subjects)
  },
  { deep: true }
)
watch(
  () => fullPath.value,
  () => {
    if (fullPath.value) return
    getNaviAddress(fullPath.value, subjectsComp.value)
  },
  { immediate: true }
)

onMounted(() => {
  getCurrentHoldIndex(fullPath.value)
})

/**
 * リロード時に元々のメニューが選択された状態で表示されるようにするための関数
 * @param path
 */
const getCurrentHoldIndex = (path: string) => {
  subjectsComp.value.forEach((menu, menuIndex) => {
    if (menu.subtitle.length) {
      if (menu.subtitle.some((sub) => path === sub.path)) {
        holdIndex.value = menuIndex
      }
    } else if (path === menu.path) {
      holdIndex.value = menuIndex
    }
  })
}

/**
 * メインメニューをクリックした時の処理
 * @param subject メニュー情報
 * @param index 何番目のメニューか
 */
const subjectClickAction = (subject: SubjectType, index: number) => {
  let path = ''
  if (!subject.subtitle[0]) {
    // 副題が設定されていない場合
    path = subject.path
  } else {
    if (holdIndex.value !== index) {
      path = subject.subtitle[0].path
    }
    // どこのメインメニューを選択しているかを保持する
  }
  emit('push', path)
  fullPath.value = path
  holdIndex.value = index
}

const subtitleClickAction = (path: string) => {
  // 副題の対象ページへ遷移する
  fullPath.value = path
  emit('push', path)
}
</script>

<template>
  <div class="_button_container">
    <div class="_left_contain">
      <div v-for="(subject, index) in subjectsComp" :key="subject.title" class="_left_area">
        <button
          class="_subject_button"
          :class="{ _subject_button_active: index === holdIndex }"
          @click="subjectClickAction(subject, index)"
        >
          <CCMDIcon
            :name="(subject.icon as MDIconTypes)"
            class="_subject_icon"
            v-if="!subject.image"
          />
          <img :src="subject.image" :alt="subject.title" class="_subject_image" v-else />
          <div v-html="subject.title"></div>
        </button>
      </div>
      <div class="_design1_space" />
    </div>

    <div class="_right_area">
      <button
        v-for="sub in subjectsComp[holdIndex]?.subtitle ?? []"
        :key="sub.path"
        @click="subtitleClickAction(sub.path)"
        :class="['_submenu_button', { _submenu_button_active: sub.path === fullPath }]"
      >
        <div v-if="sub.path === fullPath" class="_select_sign" />
        <div
          v-html="sub.title"
          :style="`margin-left: ${sub.path === fullPath ? '15px' : '20px'}`"
        ></div>
        <div v-if="sub.infoNumber" class="_submenu_badge">
          {{ sub.infoNumber }}
        </div>
      </button>
      <div class="_submenu_space" />
    </div>
  </div>

  <div class="_design1_space">
    <div class="_submenu_space _submenu_width" />
  </div>
</template>

<style lang="sass" scoped>
._button_container
  display: flex
  background: var(--c-secondary)
._left_contain
  display: flex
  flex-direction: column
._left_area
  width: 65px
._subject_button
  overflow-wrap: break-word
  background: var(--c-primary)
  border: none
  outline: none
  font-size: 10px
  line-height: 13px
  border-radius: 0px
  height: 60px
  width: 100%
  align-items: center
  justify-content: center
  color: var(--c-text-color)
  transition: 0.3s
  cursor: pointer
._right_area
  width: 100%
  display: flex
  flex-direction: column
  background: var(--c-secondary)
._submenu_button
  height: 48px
  width: 100%
  outline: none
  border: none
  font-size: 12px
  background: var(--c-secondary)
  display: flex
  align-items: center
  padding: 0
  position: relative
  cursor: pointer
._submenu_button:hover
  color: var(--c-text-color)
._submenu_badge
  color: var(--c-text-color)
  position: absolute
  right: 5px
  display: flex
  justify-content: center
  background: var(--c-warning)
  border-radius: 50%
  width: 20px
  height: 20px
  justify-content: center
  align-items: center
  font-size: 10px
._submenu_button_active
  color: var(--c-text-color)
._select_sign
  width: 3px
  height: 17px
  background: var(--c-text-color)
._subject_button_active
  background: var(--c-secondary)
  @media screen and (max-width: 700px)
    opacity: 1
._subject_button:hover
  opacity: 0.7
  @media screen and (max-width: 700px)
    opacity: 1
._subject_icon
  font-size: 24px
._subject_image
  width: 24px
  height: 24px
  object-fit: contain
._subtitle_button
  border: none
  outline: none
  background: var(--c-primary)
  border-radius: 0px
  height: 60px
  width: 100%
  display: flex
  align-items: center
  padding: 0 15px 0 50px
  color: var(--c-text-color)
  transition: 0.3s
  cursor: pointer
._subtitle_button_active
  opacity: 0.7
  @media screen and (max-width: 700px)
    opacity: 1
._subtitle_button:hover
  opacity: 0.7
  @media screen and (max-width: 700px)
    opacity: 1
._subtitle_icon
  font-size: 24px
  margin-right: 20px
._design1_space,._submenu_space
  flex-grow: 1
._design1_space
  display: flex
  flex-direction: column
  background: var(--c-primary)
._submenu_space
  background: var(--c-secondary)
._submenu_width
  width: calc(100% - 65px)
  margin-left: 65px
</style>
