<template>
  <div class="task-management">
    <LearningTaskList
      v-if="currentView === 'list'"
      @add="handleAdd"
      @edit="handleEdit"
    />
    <LearningTaskAdd
      v-else-if="currentView === 'add' || currentView === 'edit'"
      :task-i-d="currentTaskId"
      @success="handleSuccess"
      @cancel="handleCancel"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { LearningTaskList, LearningTaskAdd } from '@/views/task';
import type { LearningTask } from '@/types/study';

defineOptions({
  name: 'TaskManageView'
});

type ViewType = 'list' | 'add' | 'edit';

const currentView = ref<ViewType>('list');
const currentTaskId = ref<string>();

function handleAdd() {
  currentView.value = 'add';
  currentTaskId.value = undefined;
}

function handleEdit(task: LearningTask) {
  currentView.value = 'edit';
  currentTaskId.value = task.taskID;
}

function handleSuccess() {
  currentView.value = 'list';
  currentTaskId.value = undefined;
}

function handleCancel() {
  currentView.value = 'list';
  currentTaskId.value = undefined;
}
</script>

<style lang="scss" scoped>
.task-management {
  height: 100%;
  background: #f5f7fa;
}
</style>
