<template>
  <div class="container">
    <n-flex align="center" justify="space-between" class="title">
      <n-flex align="center">
        <Icon
          :icon="
            taskTab === TASK_TYPE.Tutorial
              ? 'twemoji:books'
              : 'twemoji:crossed-swords'
          "
          :width="20"
        ></Icon>
        <n-tabs
          style="width: 150px"
          type="segment"
          animated
          :value="taskTab"
          @update:value="changeTab"
        >
          <n-tab name="tutorial" tab="教程"></n-tab>
          <n-tab name="challenge" tab="挑战"></n-tab>
        </n-tabs>
        <template v-if="!hideNav">
          <n-button
            text
            @click="tutorialRef?.prev()"
            :disabled="tutorialRef?.prevDisabled()"
          >
            <Icon :width="24" icon="pepicons-pencil:arrow-left"></Icon>
          </n-button>
          <n-button
            text
            @click="tutorialRef?.next()"
            :disabled="tutorialRef?.nextDisabled()"
          >
            <Icon :width="24" icon="pepicons-pencil:arrow-right"></Icon>
          </n-button>
        </template>
      </n-flex>
      <n-flex>
        <n-button v-if="roleSuper" text @click="statsModal = true">
          <Icon :width="16" icon="lucide:bar-chart-2"></Icon>
        </n-button>
        <n-button
          v-if="authed"
          text
          @click="$router.push({ name: 'submissions', params: { page: 1 } })"
        >
          <Icon :width="16" icon="lucide:list"></Icon>
        </n-button>
        <n-button text v-if="roleSuper" @click="edit">
          <Icon :width="16" icon="lucide:edit"></Icon>
        </n-button>
        <n-button text @click="$emit('hide')">
          <Icon :width="24" icon="material-symbols:close-rounded"></Icon>
        </n-button>
      </n-flex>
    </n-flex>
    <Tutorial v-if="taskTab === TASK_TYPE.Tutorial" ref="tutorialRef" />
    <Challenge v-else />
  </div>
  <TaskStatsModal v-model:show="statsModal" :task-id="taskId" />
</template>
<script lang="ts" setup>
import { Icon } from "@iconify/vue"
import { computed, onMounted, ref } from "vue"
import { step } from "../store/tutorial"
import { authed, roleAdmin, roleSuper } from "../store/user"
import { taskTab, taskId, challengeDisplay } from "../store/task"
import { useRoute, useRouter } from "vue-router"
import { TASK_TYPE } from "../utils/const"
import Challenge from "./Challenge.vue"
import Tutorial from "./Tutorial.vue"
import TaskStatsModal from "./TaskStatsModal.vue"

const route = useRoute()
const router = useRouter()
const tutorialRef = ref<InstanceType<typeof Tutorial>>()
const statsModal = ref(false)

defineEmits(["hide"])

const hideNav = computed(
  () =>
    taskTab.value !== TASK_TYPE.Tutorial ||
    (tutorialRef.value?.tutorialIds?.length ?? 0) <= 1,
)

function changeTab(v: TASK_TYPE) {
  taskTab.value = v
  if (v === TASK_TYPE.Tutorial) {
    router.push(
      step.value
        ? { name: "home-tutorial", params: { display: step.value } }
        : { name: "home-tutorial-list" },
    )
  } else if (v === TASK_TYPE.Challenge) {
    challengeDisplay.value = 0
    router.push({ name: "home-challenge-list" })
  }
}

function edit() {
  const name =
    taskTab.value === TASK_TYPE.Tutorial
      ? "tutorial-editor"
      : "challenge-editor"
  const display =
    taskTab.value === TASK_TYPE.Tutorial ? step.value : challengeDisplay.value
  router.push({ name, params: { display } })
}

function init() {
  const name = route.name as string
  if (name.startsWith("home-tutorial")) {
    taskTab.value = TASK_TYPE.Tutorial
    if (route.params.display) step.value = Number(route.params.display)
  } else if (name.startsWith("home-challenge")) {
    taskTab.value = TASK_TYPE.Challenge
    if (route.params.display)
      challengeDisplay.value = Number(route.params.display)
  }
}

onMounted(init)
</script>
<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.title {
  height: 43px;
  padding: 0 20px;
  flex-shrink: 0;
  border-bottom: 1px solid rgb(239, 239, 245);
  box-sizing: border-box;
}
</style>
