<template>
  <v-app>
    <v-container class="mb-7" fluid style="width: 1440px">
      <main-nav />

      <v-main>
        <v-sheet v-if="!lastUpdated || isLoading" class="mt-2" color="transparent">
          <h5 class="text-h5">Fetching Data</h5>
        </v-sheet>

        <v-sheet v-else-if="error" class="mt-2" color="transparent">
          <h5 class="text-h5">Can't fetch data. Please try again later</h5>
        </v-sheet>

        <template v-else>
          <build-server-stats />
          <currently-building />
          <packages />
        </template>
      </v-main>
    </v-container>
  </v-app>
</template>

<script lang="ts" setup>
import MainNav from '@/components/MainNav.vue'
import BuildServerStats from '@/components/BuildServerStats.vue'
import CurrentlyBuilding from '@/components/CurrentlyBuilding.vue'
import Packages from '@/components/Packages.vue'
import { useDataStore } from '@/stores/dataStore'
import { computed, onMounted, onUnmounted } from 'vue'

const dataStore = useDataStore()

const isLoading = computed(() => dataStore.loading)
const error = computed(() => dataStore.error)
const lastUpdated = computed(() => {
  if (!dataStore.data) return null
  return dataStore.data.lastUpdated
})

onMounted(async () => {
  await dataStore.startAutoRefresh()
})

onUnmounted(() => {
  dataStore.stopAutoRefresh()
})
</script>
