<template>
  <v-app @keyup.shift.tab="toggleDrawer" :style="bg">
    <v-navigation-drawer temporary v-model="drawer" location="right"
      ><v-list density="compact" nav>
        <v-list-item
          prepend-icon="mdi-home"
          title="Home"
          value="home"
          @click="
            atHome = true;
            atEdit = false;
            atSettings = false;
          "
        ></v-list-item>
        <v-list-item
          prepend-icon="mdi-pencil"
          title="Edit"
          value="edit"
          @click="
            atHome = false;
            atEdit = true;
            atSettings = false;
          "
        ></v-list-item>
        <v-list-item
          prepend-icon="mdi-cog-outline"
          title="Settings"
          value="settings"
          @click="
            atHome = false;
            atEdit = false;
            atSettings = true;
          "
        ></v-list-item>
        <v-list-item
          prepend-icon="mdi-theme-light-dark"
          title="Theme"
          value="theme"
          @click="toggleTheme"
        ></v-list-item> </v-list
    ></v-navigation-drawer>
    <v-snackbar color="grey" v-model="snackbar">
      {{ snackbarText }}

      <template v-slot:actions>
        <v-btn variant="snackbarText" @click="snackbar = false"> Close </v-btn>
      </template>
    </v-snackbar>
    <v-main>
      <v-container class="float-end w-50">
        <HomePage v-if="atHome" />
        <EditPage v-if="atEdit" @snackbar-notification="setSnackbarText" />
        <SettingsPage v-if="atSettings" />
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
import { useTheme } from "vuetify";
import HomePage from "./components/HomePage.vue";
import EditPage from "./components/EditPage.vue";
import SettingsPage from "./components/SettingsPage.vue";

export default {
  name: "App",

  components: {
    HomePage,
    EditPage,
    SettingsPage,
  },

  data: () => ({
    drawer: null,
    atHome: true,
    atEdit: false,
    atSettings: false,
    snackbar: false,
    snackbarText: "Default snackbar text (End-user shouldn't see this)",
    bg: {
      backgroundColor: "grey",
      // backgroundImage: "url(https://wallpapercave.com/wp/wp9649930.jpg)",
      backgroundPosition: "center",
    },
  }),

  setup() {
    const theme = useTheme();

    return {
      theme,
      toggleTheme: () =>
        (theme.global.name.value = theme.global.current.value.dark
          ? "light"
          : "dark"),
    };
  },

  methods: {
    toggleDrawer() {
      this.drawer = !this.drawer;
    },
    setSnackbarText(text) {
      this.snackbarText = text;
      this.snackbar = true;
    },
  },
};
</script>
