<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title>Updater</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Updater</ion-title>
        </ion-toolbar>
      </ion-header>

      <home-card v-if="shownCard == 1" @archive="showArchive" @disconnect="showScan" @update="showDetails"></home-card>
      <scan-card v-else-if="shownCard == 0" @connect="showHome"></scan-card>
      <details-card v-else-if="shownCard == 2" @back="showHome" @choose="showFlash"></details-card>
      <archive-card v-else-if="shownCard == 3" @back="showHome" @details="showDetails"></archive-card>
      <flash-card v-else-if="shownCard == 4" @back="showHome"></flash-card>
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
import HomeCard from "@/components/HomeCard.vue";
import ScanCard from "@/components/ScanCard.vue";
import DetailsCard from "@/components/DetailsCard.vue";
import ArchiveCard from "@/components/ArchiveCard.vue";
import FlashCard from "@/components/FlashCard.vue";
import {ref} from "vue";

const shownCard = ref<number>(0);

const showArchive = () => {
  shownCard.value = 3;
}

const showHome = () => {
  shownCard.value = 1;
}

const showDetails = () => {
  shownCard.value = 2;
}

const showFlash = () => {
  shownCard.value = 4;
}

const showScan = () => {
  shownCard.value = 0;
}
</script>

<style scoped>
#container {
  text-align: center;
  
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

#container strong {
  font-size: 20px;
  line-height: 26px;
}

#container p {
  font-size: 16px;
  line-height: 22px;
  
  color: #8c8c8c;
  
  margin: 0;
}

#container a {
  text-decoration: none;
}

</style>
