<script setup lang="ts">
import { ref } from 'vue'
import type { CourseModel } from '~/stores/modules/course'
import CourseActionSheet from '~/components/timetable/CourseActionSheet.vue'
import TimetableContent from '~/components/timetable/TimetableContent.vue'
import UBasePage from '~/components/UnoUI/UBasePage/UBasePage.vue'

import { useAppStore } from '~/stores/modules/app'
import { usePageStore } from '~/stores/modules/page'
import { useCourseStore } from '~/stores/modules/course'

const { customBarHeight, statusBarHeight, classinfo } = storeToRefs(useAppStore())
const { setPageConfig } = usePageStore()
const { currentWeekIndex, isStart } = storeToRefs(useCourseStore())
const {
  getCourseList,
  setStartDay,
} = useCourseStore()

onShow(() => {
  setPageConfig({ showNavBar: false })
})

setStartDay()
const showCourseAction = ref(false)

function handleCreateCourse() {
  uni.navigateTo({
    url: '/pages/course/detail',
  })
}

// handle course item click
const showActionSheet = ref(false)
const clickedCourseItem = ref<CourseModel>()
function handleShowActionSheet(courseItem: CourseModel) {
  showActionSheet.value = true
  clickedCourseItem.value = courseItem
}

function handleCloseActionSheet() {
  showActionSheet.value = false
}

const onFabClick = async () => {
  uni.showModal({
    cancelText: '取消',
    confirmText: '确认',
    title: '刷新课表?',
    content: '是否在线刷新课表，确认后将会覆盖课表',
    success: async () => {
      if (classinfo.value) {
        await getCourseList(classinfo.value.value)
      }
      else {
        uni.showToast({
          icon: 'error',
          title: '请先配置班级~',
        })
      }
    },
  })
}
const formattedWeek = computed(() => {
  return `第${currentWeekIndex.value + 1}周${!isStart.value ? '(未开学)' : ''}`
})
</script>

<template>
  <UBasePage>
    <view
      class="bg-primary text-white w-full top-0 z-200 fixed font-bold"
      :style="{ height: `${customBarHeight}px` }"
    >
      <view
        :style="{
          'padding-top': `${statusBarHeight}px`,
          'height': `${customBarHeight - statusBarHeight}px`,
        }"
      >
        <view class="h-full text-center px-6 relative">
          <view class="h-full text-xl left-4 i-carbon-add absolute" @click="handleCreateCourse" />
          <view
            class="flex h-full mx-auto justify-center items-center inline-block text-lg"
            @click="showCourseAction = !showCourseAction"
          >
            {{ formattedWeek }}
            <view
              class="transition-transform duration-300 i-carbon-chevron-up"
              :class="showCourseAction ? 'rotate-180' : 'rotate-0'"
            />
          </view>
        </view>
      </view>
    </view>
    <!-- timetable main content -->
    <TimetableContent :show-course-action="showCourseAction" @course-item-click="handleShowActionSheet" />
    <!-- course card -->
    <CourseActionSheet
      :show-action-sheet="showActionSheet" :course-item="clickedCourseItem"
      @cancel="handleCloseActionSheet"
    />
  </UBasePage>
  <uni-fab horizontal="right" :pattern="{ icon: 'loop' }" @fab-click="onFabClick" />
</template>
