<template>
  <v-card class="mx-auto" variant="outlined" max-height="500">
    <v-card-title class="text-h5 font-weight-regular align-center">
      <span>{{ currentTitle }}</span>
    </v-card-title>
    <v-window v-model="location" show-arrows="hover">
      <v-window-item :value="1">
        <v-card-text>
          <v-container fluid>
            <v-row>
              <v-col>
                <v-card-text>Title Size: {{ titleSize }}px</v-card-text>
                <v-slider
                  v-model="titleSize"
                  :min="25"
                  :max="35"
                  step="1"
                ></v-slider>
              </v-col>
              <v-col>
                <v-card-text>Content Size</v-card-text>
                <v-radio-group v-model="contentSize" column>
                  <v-radio label="text-h4" value="text-h4"></v-radio>
                  <v-radio label="text-h5" value="text-h5"></v-radio>
                  <v-radio label="text-h6" value="text-h6"></v-radio>
                </v-radio-group>
              </v-col>
            </v-row>
          </v-container>
        </v-card-text>
      </v-window-item>
      <v-window-item :value="2">
        <v-card-text>
          <v-text-field
            label="Background Image URL"
            prepend-icon="mdi-image"
            variant="outlined"
            shaped
            v-model="backgroundImageURL"
          ></v-text-field>
        </v-card-text>
        <v-card-actions class="d-flex justify-space-around">
          <v-btn variant="outlined" @click="saveBackgroundImageURL">Save</v-btn>
          <v-btn variant="outlined" @click="resetBackgroundImageURL"
            >Reset</v-btn
          >
        </v-card-actions>
      </v-window-item>
      <v-window-item :value="3">
        <v-textarea height="300" no-resize readonly :value="debugLog">
        </v-textarea>
        <v-card-actions class="d-flex justify-space-around">
          <v-btn variant="outlined" @click="showLSDebug"
            >Show LocalStorage Content</v-btn
          >
          <v-btn variant="outlined" @click="clearLS">Clear LocalStorage</v-btn>
          <v-btn variant="outlined" @click="debugLog = ''">Clear Output</v-btn>
        </v-card-actions>
      </v-window-item>
      <v-window-item :value="4">
        <v-card-text>
          <span class="text-h6"
            >Otonashi is a simple, easy-to-use classboard app, built by 135e2
            with Vue 3, Vuetify and ❤️.<br /><br />This project is libre, and
            licensed under WTFPLv2, as published by San Hocevar on December
            2004. See the COPYING file for more details.</span
          >
        </v-card-text>
      </v-window-item>
    </v-window>
  </v-card>
</template>

<script>
export default {
  name: "SettingsPage",
  props: ["realTitleSize", "realContentSize"],
  emits: ["updateTitleSize", "updateContentSize", "updateBackgroundImageURL"],

  computed: {
    currentTitle() {
      switch (this.location) {
        case 1:
          return "MainPage Settings";
        case 2:
          return "Background Settings";
        case 3:
          return "Developer Settings";
        default:
          return "About Otonashi";
      }
    },
  },

  watch: {
    // eslint-disable-next-line no-unused-vars
    titleSize(s, _) {
      this.$emit("updateTitleSize", s);
    },
    // eslint-disable-next-line no-unused-vars
    contentSize(s, _) {
      this.$emit("updateContentSize", s);
    },
  },

  mounted() {
    this.loadFromLS();
    // Sync titleSize with realTitleSize
    this.titleSize = this.realTitleSize;
    // Same
    this.contentSize = this.realContentSize;
  },

  data: () => ({
    backgroundImageURL: "",
    titleSize: 35,
    contentSize: "text-h5",
    debugLog: "",
    location: 1,
  }),

  methods: {
    // LocalStorage
    loadFromLS() {
      this.backgroundImageURL =
        JSON.parse(localStorage.getItem("backgroundImageURL")) ||
        this.backgroundImageURL;
    },
    writeToLS() {
      localStorage.setItem(
        "backgroundImageURL",
        JSON.stringify(this.backgroundImageURL)
      );
    },
    clearLS() {
      localStorage.clear();
      this.debugLog += "LocalStorage cleared.\n";
    },
    showLSDebug() {
      this.debugLog += `LS in JSON format: ${JSON.stringify(localStorage)}\n`;
    },
    saveBackgroundImageURL() {
      this.$emit("updateBackgroundImageURL", this.backgroundImageURL);
      this.writeToLS();
    },
    resetBackgroundImageURL() {
      // Reset URL and emit event.
      this.backgroundImageURL = "";
      this.saveBackgroundImageURL();
    },
  },
};
</script>