<template>
  <main v-if="loaded">
    <TopBar v-if="!isFullscreen" />
    <router-view />
  </main>
  <main class="loading-box" v-else>
    <h1 class="loading-message" v-if="loading">{{ loading }}</h1>
  </main>
</template>

<style lang="scss" scoped>
main.loading-box {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

h1.loading-message {
  flex: 1;
  text-align: center;
}
</style>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action, Getter } from "vuex-class";
import TopBar from "@/components/Navigation/TopBar.vue";
import { loadSets } from "@/mlpccg/set";
import { AppState } from "./store/types";

@Component({
  components: {
    TopBar
  }
})
export default class App extends Vue {
  @Action showLoading!: (msg: string) => void;
  @Action hideLoading!: () => void;
  @Action setLoaded!: (loaded: boolean) => void;
  @Getter loaded!: boolean;
  @Getter loading!: string | null;

  private get isFullscreen(): boolean {
    return this.$route.meta && this.$route.meta.fullscreen;
  }

  private mounted() {
    // Load all sets
    this.loadCards();
  }

  private async loadCards() {
    this.showLoading("Downloading data for all sets");
    await loadSets();
    this.hideLoading();
    this.setLoaded(true);
  }
}
</script>
