<template>
  <div class="element-style-panel">
    <component :is="currentPanelComponent" />
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue"
import { storeToRefs } from "pinia"
import { useMainStore } from "@/store"
import { ElementTypes, ElementSubtypeTypes } from "@/types/slides"

import TextStylePanel from "./TextStylePanel.vue"
import ImageStylePanel from "./ImageStylePanel.vue"
import ShapeStylePanel from "./ShapeStylePanel.vue"
import LineStylePanel from "./LineStylePanel.vue"
import ChartStylePanel from "./ChartStylePanel/index.vue"
import TableStylePanel from "./TableStylePanel.vue"
import LatexStylePanel from "./LatexStylePanel.vue"
import VideoStylePanel from "./VideoStylePanel.vue"
import AudioStylePanel from "./AudioStylePanel.vue"
import MultiStylePanel from "./MultiStylePanel.vue"
import CloudCoachStylePanel from "./CloudCoachStylePanel.vue"
import EnjoyStylePanel from "./EnjoyStylePanel.vue"
import ListeningPracticeStylePanel from "./ListeningPracticeStylePanel.vue"
import RhythmPracticeStylePanel from "./RhythmPracticeStylePanel.vue"
import MusicResourcesStylePanel from "./MusicResourcesStylePanel.vue"

const panelMap = {
  [ElementTypes.TEXT]: TextStylePanel,
  [ElementTypes.IMAGE]: ImageStylePanel,
  [ElementTypes.SHAPE]: ShapeStylePanel,
  [ElementTypes.LINE]: LineStylePanel,
  [ElementTypes.CHART]: ChartStylePanel,
  [ElementTypes.TABLE]: TableStylePanel,
  [ElementTypes.LATEX]: LatexStylePanel,
  [ElementTypes.ELF]: null
}
const elementSubtypeMap = {
  [ElementSubtypeTypes.AUDIO]: AudioStylePanel,
  [ElementSubtypeTypes.VIDEO]: VideoStylePanel,
  [ElementSubtypeTypes.SING_PLAY]: CloudCoachStylePanel,
  [ElementSubtypeTypes.ENJOY]: EnjoyStylePanel,
  [ElementSubtypeTypes.LISTENING_PRACTICE]: ListeningPracticeStylePanel,
  [ElementSubtypeTypes.RHYTHM_PRACTICE]: RhythmPracticeStylePanel,
  [ElementSubtypeTypes.MUSIC_RESOURCES]: MusicResourcesStylePanel
}
const { activeElementIdList, activeElementList, handleElement, activeGroupElementId } = storeToRefs(useMainStore())

const currentPanelComponent = computed<unknown>(() => {
  if (activeElementIdList.value.length > 1) {
    if (!activeGroupElementId.value) return MultiStylePanel

    const activeGroupElement = activeElementList.value.find(item => item.id === activeGroupElementId.value)
    return activeGroupElement ? panelMap[activeGroupElement.type] || elementSubtypeMap[activeGroupElement.subtype] || null : null
  }

  return handleElement.value ? panelMap[handleElement.value.type] || elementSubtypeMap[handleElement.value.subtype] || null : null
})
</script>
