<template>
  <v-app>
    <v-main>
      <v-app-bar flat color="white">
        <v-icon large left color="orange darken-4">mdi-weather-sunset</v-icon>

        <v-toolbar-title v-if="$vuetify.breakpoint.mdAndUp"
          >Demo aplikacji pogodowej</v-toolbar-title
        >

        <v-spacer></v-spacer>

        <v-toolbar-items>
          <v-btn text @click="logout()">
            <span>Wyloguj</span>
            <v-icon right>mdi-logout</v-icon>
          </v-btn>
        </v-toolbar-items>
      </v-app-bar>
      <v-row justify="center" class="ma-2">
        <v-col cols="12" sm="11" md="10" lg="9" xl="8">
          <component :is="module"></component>
        </v-col>
      </v-row>
    </v-main>
    <Snackbars />
  </v-app>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Login from "@/views/Login.vue";
import Forecast from "@/views/Forecast.vue";
import Snackbars from "@/components/Snackbar.vue"

@Component({
  components: {
    Login,
    Forecast,
    Snackbars,
  },
})
export default class App extends Vue {
  get auth() {
    return this.$store.getters.auth;
  }

  get module() {
    return this.auth ? Forecast : Login;
  }

  private logout() {
    this.$store.dispatch('logout');
  }
}
</script>
