<template>
  <ion-card>
    <ion-card-header class="two-column">
      <div class="header-column">
        <ion-card-title>HOME</ion-card-title>
        <ion-card-title>Board</ion-card-title>
        <ion-card-subtitle>{{ version }}</ion-card-subtitle>
      </div>
      <div style="flex-grow: 1"></div>
      <div>
        <ion-button @click="disconnect">Disconnect</ion-button>
      </div>
    </ion-card-header>

    <ion-card-content>
      <ion-button @click="update" v-if="showUpdater">Update</ion-button>
      <br>
      <ion-button @click="openArchive">View older versions</ion-button>
      <br>
      <ion-button @click="settings">Settings</ion-button>
    </ion-card-content>
  </ion-card>
</template>
<script setup lang="ts">
import useArchiveStore from "@/stores/archive";
import updater from "@/utils/updater";
import {IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle} from "@ionic/vue";
import { onBeforeMount, ref } from "vue";

const emit = defineEmits<{(e: 'update'): void, (e: 'archive'): void, (e: "disconnect"): void, (e: "settings"): void}>();

const archive = useArchiveStore();
const showUpdater = ref<boolean>(false);

const version = ref<string>("");

const update = () => {
  archive.setShownI(0);
  emit("update");
};

const openArchive = () => {
  emit("archive");
};

const disconnect = () => {
  emit("disconnect");
};

const settings = () => {
  emit("settings")
}

onBeforeMount(async () => {
  version.value = await updater.obj.getBoardVersion();
  showUpdater.value = await updater.obj.checkForUpdate();
});
</script>

<style scoped>

.two-column {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
</style>
