<template>
  <v-app @click.ctrl="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 timeout="3000" :color="snackbarColor" v-model="snackbar">
      {{ snackbarText }}

      <template v-slot:actions>
        <v-btn variant="plain" @click="snackbar = false"> Close </v-btn>
      </template>
    </v-snackbar>
    <v-main>
      <v-container class="float-end w-50">
        <HomePage v-if="atHome" :contentSize="contentSize" />
        <EditPage v-else-if="atEdit" @snackbar-notification="setSnackbarText" />
        <SettingsPage
          v-else-if="atSettings"
          @update-title-size="updateTitleSize"
          @update-content-size="updateContentSize"
          @update-background-image-u-r-l="
            (s) => {
              updateBackgroundImageURL(s);
              setSnackbarText(
                s ? `BackgroundImage set to ${s}.` : `backgroundImage reset.`
              );
            }
          "
          :realTitleSize="parseInt(titleSize)"
          :realContentSize="contentSize"
        />
      </v-container>
    </v-main>
    <!-- This is a dirty workaround to use styles inside the template. Further
    help needed. -->
    <component :is="`style`">
      .v-card-title { font-size: {{ titleSize }}; }
    </component>
  </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: () => ({
    titleSize: "35px",
    contentSize: "text-h5",
    drawer: null,
    atHome: true,
    atEdit: false,
    atSettings: false,
    snackbar: false,
    snackbarText: "Default snackbar text (End-user shouldn't see this)",
    snackbarColor: "black",
    bg: {
      // backgroundColor: "grey",
      backgroundImage: "",
      backgroundPosition: "center",
    },
  }),

  setup() {
    const theme = useTheme();

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

  mounted() {
    this.updateBackgroundImageURL(
      JSON.parse(localStorage.getItem("backgroundImageURL"))
    );
  },

  methods: {
    toggleDrawer() {
      this.drawer = !this.drawer;
    },
    setSnackbarText(text) {
      this.snackbarText = text;
      this.snackbar = true;
    },
    toggleTheme() {
      this.toggleVuetifyTheme();
      this.snackbarColor = this.snackbarColor == "black" ? "grey" : "black";
    },
    updateTitleSize(s) {
      this.titleSize = `${s}px`;
    },
    updateContentSize(s) {
      this.contentSize = s;
    },
    updateBackgroundImageURL(s) {
      this.bg.backgroundImage = s ? `url(${s})` : "";
    },
  },
};
</script>
