<!--
  -
  - Copyright (c) 2025. Jeffery Hsu - Achievement Report Generator
  -
  - This program is free software: you can redistribute it and/or modify
  - it under the terms of the GNU General Public License as published by
  - the Free Software Foundation, either version 3 of the License, or
  - (at your option) any later version.
  -
  - This program is distributed in the hope that it will be useful,
  - but WITHOUT ANY WARRANTY; without even the implied warranty of
  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  - GNU General Public License for more details.
  -
  - You should have received a copy of the GNU General Public License
  - along with this program. If not, see <https://www.gnu.org/licenses/>.
  -
  -->

<script setup lang="ts">
import { useGlobalStore } from '@renderer/store'
import { onMounted, ref } from 'vue'
import { InfoFilled, Plus } from '@element-plus/icons-vue'
import CourseInfoDisplay from '@renderer/components/assessment/CourseInfoDisplay.vue'
import CourseGoalDisplay from '@renderer/components/assessment/CourseGoalDisplay.vue'
import { ElMessage } from 'element-plus'
import router from '@renderer/router'
import SectionHeader from '@renderer/components/common/SectionHeader.vue'

type MenuAPI = {
  handleShowEditor: () => void
}

type CourseInfoDisplayExposed = MenuAPI

type CourseGoalDisplayExposed = MenuAPI

const store = useGlobalStore()

const course = ref(store.doc.course)
const courseInfoDisplay = ref<CourseInfoDisplayExposed | null>(null)
const courseGoalDisplay = ref<CourseGoalDisplayExposed | null>(null)

const handleEditCourse = () => {
  if (courseInfoDisplay.value === null) {
    ElMessage.error({
      message: '组件错误：COURSE_INFO_DISPLAY 为 null'
    })
    return
  }

  courseInfoDisplay.value.handleShowEditor()
}

const handleAddNewGoal = () => {
  if (courseGoalDisplay.value === null) {
    ElMessage.error({
      message: '组件错误: COURSE_GOAL_DISPLAY 为 null'
    })

    return
  }

  courseGoalDisplay.value.handleShowEditor()
}

onMounted(async () => {
  if (store.doc.course.isEmpty()) {
    await router.push({ name: 'start' })
  }
})
</script>

<template>
  <div>
    <section-header>
      <template #title>
        <p>课程信息：{{ course.name }}</p>
      </template>
      <el-button type="primary" :icon="InfoFilled" @click="handleEditCourse">
        编辑课程信息
      </el-button>
      <el-button :icon="Plus" @click="handleAddNewGoal">添加课程目标</el-button>
    </section-header>

    <CourseInfoDisplay ref="courseInfoDisplay" />
    <CourseGoalDisplay ref="courseGoalDisplay" />
  </div>
</template>

<style scoped></style>
