<script setup>
import Init from '@/pages/Init.vue'
import Launch from '@/pages/Launch.vue'
import Update from '@/pages/Update.vue'
import Fix from '@/pages/Fix.vue'
import { dateZhCN, zhCN } from 'naive-ui'
import Settings from '@/pages/Settings.vue'
import { useConfigStore } from '@/stores/config.js'

const configStore = useConfigStore()
const loading = ref(true)
const page = ref(null)
let conf

function show_doc() {
  window.open('https://hedgedoc.zhaozuohong.vip/s/LfSzK2n0K', '_blank')
}

async function init_version() {
  version.value = await pywebview.api.get_version()
  new_version.value = await pywebview.api.get_new_version()
  if (new_version.value.tag_name > version.value) {
    update_able.value = true
  }
}
async function initialize_config() {
  await configStore.load_config()
  conf = configStore.config
  loading.value = false
  if (!conf.is_already_show_doc) {
    show_doc()
    conf.is_already_show_doc = true
  }
  await init_version()
}

const log = ref([])
provide('log', log)
const log_ele = ref(null)
provide('log_ele', log_ele)
watch(
  log,
  () => {
    nextTick(() => {
      log_ele.value?.scrollTo({ position: 'bottom' })
    })
  },
  { deep: true }
)

onMounted(() => {
  if (window.pywebview && pywebview.api) {
    initialize_config()
  } else {
    window.addEventListener('pywebviewready', () => {
      initialize_config()
    })
  }
  window.addEventListener('log', (e) => {
    log.value.push(e.detail.log)
    if (log.value.length > 200) {
      log.value.shift()
    }
  })
})

function set_page(value) {
  log.value.splice(0)
}

const running = ref(false)
provide('running', running)

const steps = ref([])
provide('steps', steps)

const update_able = ref(false)
provide('update_able', update_able)

const version = ref('')
provide('version', version)

const new_version = ref({})
provide('new_version', new_version)
</script>

<template>
  <n-config-provider :locale="zhCN" :dateLocale="dateZhCN">
    <n-spin v-if="loading" class="container">
      <template #description>加载中</template>
    </n-spin>
    <n-notification-provider v-else>
      <n-tabs
        type="card"
        placement="left"
        class="container"
        v-model:value="conf.page"
        @update:value="set_page"
        justify-content="center"
      >
        <n-tab-pane :disabled="running" name="init" tab="初始化"><init /></n-tab-pane>
        <n-tab-pane :disabled="running" name="update" tab="更新代码"><update /></n-tab-pane>
        <n-tab-pane :disabled="running" name="launch" tab="启动程序"><launch /></n-tab-pane>
        <n-tab-pane :disabled="running" name="fix" tab="依赖修复"><fix /></n-tab-pane>
        <n-tab-pane :disabled="running" name="settings">
          <template #tab>
            <div class="tab-content">
              <span>设置</span>
              <n-tag v-if="update_able" class="tag" round type="success">新</n-tag>
            </div>
          </template>
          <settings />
        </n-tab-pane>
        <template #suffix>
          <div class="suffix-container">
            <n-button type="primary" secondary size="small" @click="show_doc">帮助文档</n-button>
          </div>
        </template>
      </n-tabs>
    </n-notification-provider>
    <n-global-style />
  </n-config-provider>
</template>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
}
.suffix-container {
  margin: 0 4px 6px 4px;
}
.tab-content {
  position: relative;
}
.tag {
  margin-left: 4px;
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
}
</style>
