<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import PageNarBar from './components/page-narbar.vue'
import AppSetting from './components/app-setting.vue'
import AppPreview from './components/app-preview.vue'
import AppPublish from './components/app-publish.vue'
import { usePersonalAppConfigStore } from '@/store/modules/personal-app-config'

const router = useRouter()

const personalAppConfigStore = usePersonalAppConfigStore()

const currentAgentAppTabKey = ref('config')

onMounted(() => {
  if (router.currentRoute.value.query.tabKey) {
    currentAgentAppTabKey.value = router.currentRoute.value.query.tabKey as string
  }
})

onUnmounted(() => {
  personalAppConfigStore.resetPersonalAppConfigState()
})

function handleChangeAgentAppTabKey(currentTabKey: string) {
  currentAgentAppTabKey.value = currentTabKey
}
</script>

<template>
  <main class="h-full min-w-[1280px]">
    <PageNarBar @change-agent-app-tab-key="handleChangeAgentAppTabKey" />

    <div class="h-content flex w-full flex-1">
      <div v-if="currentAgentAppTabKey === 'config'" class="flex h-full w-full flex-1">
        <AppSetting />

        <AppPreview />
      </div>

      <div v-if="currentAgentAppTabKey === 'publish'" class="flex h-full w-full flex-1">
        <AppPublish />
      </div>
    </div>
  </main>
</template>
