<script setup lang="ts">
import { nav_stage, navOptions, stageOptions } from '.'

const props = defineProps<{
  hideAllStage?: boolean
}>()

defineOptions({ name: 'WordBookSelector' })

const nav = ref(nav_stage)

// 教材
const book = ref({} as any)

const newStageOptions = [...stageOptions]
if (props.hideAllStage) {
  newStageOptions.shift()
}
const stage = ref(newStageOptions[0].value)

watch(
  () => nav.value,
  val => {
    if (val === nav_stage) {
      book.value = {}
    } else {
      stage.value = newStageOptions[0].value
    }
  },
)

defineExpose({
  nav,
  stage,
  book,
})
</script>

<template>
  <div class="word-book-selector">
    <select-tab v-model="nav" :data-list="navOptions" type="small" />
    <select-tab
      v-if="nav === nav_stage"
      v-model="stage"
      :data-list="newStageOptions"
      type="small"
    />
    <word-book-select v-else v-model="book" />
  </div>
</template>

<style lang="scss" scoped>
.word-book-selector {
  display: flex;
  align-items: center;
  gap: 2vh;
}
</style>
