<template>
  <SetupView
    :initial-state="bootstrapState || {}"
    :submitting="setupSubmitting"
    :runtime-testing="runtimeTesting"
    :database-testing="databaseTesting"
    :runtime-test-passed="runtimeTestPassed"
    :database-test-passed="databaseTestPassed"
    :runtime-test-message="runtimeTestMessage"
    :database-test-message="databaseTestMessage"
    :error-message="setupError"
    :startup-countdown-seconds="setupCountdownSeconds"
    :startup-log="setupStartupLog"
    :startup-steps="setupStartupSteps"
    :startup-visible="setupStartupVisible"
    :progress-message="setupProgressMessage"
    @submit="submitSetup"
    @runtime-test="handleRuntimeTest"
    @database-test="handleDatabaseTest"
    @runtime-dirty="handleRuntimeDirty"
    @database-dirty="handleDatabaseDirty"
  />
</template>

<script setup>
import { useRouter } from 'vue-router'

import { useSystemState } from '../composables/useSystemState.js'
import SetupView from './SetupView.vue'

const router = useRouter()
const {
  bootstrapState,
  databaseTestMessage,
  databaseTestPassed,
  databaseTesting,
  handleDatabaseDirty,
  handleDatabaseTest,
  handleRuntimeDirty,
  handleRuntimeTest,
  handleSetupSubmit,
  runtimeTestMessage,
  runtimeTestPassed,
  runtimeTesting,
  setupCountdownSeconds,
  setupError,
  setupProgressMessage,
  setupStartupLog,
  setupStartupSteps,
  setupStartupVisible,
  setupSubmitting
} = useSystemState()

async function submitSetup(payload) {
  const completed = await handleSetupSubmit(payload)

  if (completed) {
    router.replace({ name: 'login' })
  }
}
</script>
