<template>
  <v-switch
    v-model="switchModel"
    label="I want to create a new SubCard"
  ></v-switch>

  <v-form v-show="switchModel" lazy-validate ref="form1" v-model="valid1">
    <v-text-field
      v-model="title"
      :counter="titleMaxLength"
      :rules="titleRules"
      label="Title"
      required
    ></v-text-field>

    <v-textarea
      auto-grow
      clearable
      clear-icon="mdi-close-circle"
      outlined
      name="textarea"
      label="Content"
      v-model="content"
      :rules="contentRules"
      required
    ></v-textarea>
    <v-row class="d-flex justify-end">
      <v-btn
        :disabled="!valid1"
        variant="outlined"
        class="mr-4"
        @click="
          validate(this.$refs.form1);
          write(this.$refs.form1);
        "
      >
        Save
      </v-btn>

      <v-btn variant="outlined" class="mr-4" @click="reset(this.$refs.form1)">
        Reset Form
      </v-btn>
    </v-row>
  </v-form>

  <v-form v-show="!switchModel" lazy-validate ref="form2" v-model="valid2">
    <v-select
      v-model="select"
      variant="outlined"
      :items="items"
      :rules="[(v) => !!v || 'Item is required']"
      label="Item"
      required
    ></v-select>

    <v-textarea
      auto-grow
      clearable
      clear-icon="mdi-close-circle"
      outlined
      name="textarea"
      label="Content"
      v-model="content"
      :rules="contentRules"
      required
    ></v-textarea>
    <v-row class="d-flex justify-end">
      <v-btn
        :disabled="!valid2"
        variant="outlined"
        class="mr-4"
        @click="
          validate(this.$refs.form2);
          write(this.$refs.form2);
        "
      >
        Save
      </v-btn>

      <v-btn variant="outlined" class="mr-4" @click="reset(this.$refs.form2)">
        Reset Validation
      </v-btn>
      <v-btn variant="outlined" class="mr-4" @click="deleteItem">
        Delete Item
      </v-btn>
    </v-row>
  </v-form>
</template>

<script>
export default {
  name: "EditPage",

  emits: ["snackbarNotification"],

  data: () => ({
    valid1: true,
    valid2: true,
    title: "",
    titleMaxLength: 15,
    titleRules: [
      (v) => !!v || "Title is required",
      (v) => {
        let titleMaxLength = 15;
        return (
          (v && v.length <= titleMaxLength) ||
          `Title must be less than ${titleMaxLength} characters`
        );
      },
    ],
    content: "",
    contentRules: [(v) => !!v || "Content is required"],
    select: null,
    items: [],
    switchModel: false,
    LSData: {},
  }),

  mounted() {
    this.loadFromLS();
    this.readAllItems();
  },

  methods: {
    validate(form) {
      form.validate();
    },
    reset(form) {
      // Resets validation of all registered inputs without modifying their state.
      // TODO: clearify this (do we need form.reset() ?)
      form.resetValidation();
    },
    write(form) {
      if (form == this.$refs.form1 && this.title in this.LSData) {
        this.$emit("snackbarNotification", "Title already exists");
        return;
      }
      if (form == this.$refs.form2) {
        // Sync LSData(title) with form data
        this.title = this.select;
      }
      this.LSData[this.title] = this.content;
      this.writeToLS();
      this.$emit("snackbarNotification", "Done!");
      // Let's do a reset.
      this.reset(form);
      // Re-read all items.
      this.readAllItems();
    },
    readAllItems() {
      this.items = []; // Reset items list
      for (let key in this.LSData) {
        this.items.push(key);
      }
    },
    deleteItem() {
      delete this.LSData[this.select];
      this.writeToLS();
      // Re-read all items.
      this.readAllItems();
      this.$emit("snackbarNotification", "Item deleted");
      this.reset(this.$refs.form2);
    },

    // LocalStorage
    loadFromLS() {
      this.LSData = JSON.parse(localStorage.getItem("LSData")) || this.LSData;
    },
    writeToLS() {
      localStorage.setItem("LSData", JSON.stringify(this.LSData));
    },
  },

  watch: {
    // eslint-disable-next-line no-unused-vars
    select(newSelected, _) {
      // Load content whenever select changes
      this.content = this.LSData[newSelected];
    },
  },
};
</script>