<template>
  <!-- <v-container fluid px-16 pb-10> -->
  <v-container>
    <v-row>
      <v-col cols="12">
        <div class="text-center">
          <h1>Deck Builder</h1>
          <br />
          <!-- {{ temp }} -->
        </div>
      </v-col>
    </v-row>
    <v-row>
      <v-textarea
        v-model="deck_title"
        label="Deck Title"
        class="user-deck-title"
        rows="1"
        row-height="80"
      ></v-textarea>
    </v-row>
    <v-row>
      <v-textarea v-model="deck_description" label="Deck Description">
      </v-textarea>
    </v-row>
    <v-row>
      <v-col cols="12">
        <v-select
          v-model="selected_shikigami_names"
          v-on:input="limit_shikigami"
          :items="shikigami"
          label="Select Shikigami"
          chips
          multiple
          hint="Choose 4 Shikgigami for your deck."
          persistent-hint
          item-text="name"
          item-value="name"
        >
          <template v-slot:selection="data">
            <v-chip
              v-bind="data.attrs"
              :input-value="data.selected"
              close
              x-large
              @click="data.select"
              @click:close="remove_shikigami(data.item)"
              color="#070042"
            >
              <v-avatar size="90" left>
                <v-img
                  :src="require(`@/assets/avatars/${data.item.avatar}`)"
                ></v-img>
              </v-avatar>
              {{ data.item.name }}
            </v-chip>
          </template>
          <template v-slot:item="data">
            <template>
              <v-list-item-avatar>
                <img :src="require(`@/assets/avatars/${data.item.avatar}`)" />
              </v-list-item-avatar>
              <v-list-item-content>
                <v-list-item-title v-html="data.item.name"></v-list-item-title>
                <v-list-item-subtitle
                  v-html="data.item.group"
                ></v-list-item-subtitle>
              </v-list-item-content>
            </template>
          </template>
        </v-select>
      </v-col>
      <!-- selected_shikigami_names: {{ selected_shikigami_names }} <br /> -->
      <!-- selected_shikigami_data: {{ selected_shikigami_data }} <br /> -->
      <!-- selected_shikigami_decks: {{ selected_shikigami_decks }} -->
      <!-- deck_title: {{ deck_title }} -->
    </v-row>
    <v-row v-for="(_, index) in selected_shikigami_names" :key="index">
      <v-card elevation="2" width="100%" class="pa-3" flat tile color="#070042">
        <v-row>
          <v-col cols="2">
            <div cols="12">
              <div cols="12" class="text-h5 text-center">
                <!-- {{ `${selected_shikigami_data[index].name}` }} -->
              </div>
              <div cols="12">
                <v-img
                  :src="
                    require(`@/assets/avatars/${selected_shikigami_data[index].avatar}`)
                  "
                  width="100%"
                ></v-img>
              </div>
            </div>
          </v-col>
          <v-col cols="10" class="d-flex flex-column"
            ><v-row cols="12">
              <!-- {{ index }} -->
              <!-- {{ selected_shikigami_decks[index][index].length }} -->
              <v-select
                v-model="selected_shikigami_decks[index][index]"
                v-on:input="limit_decks"
                :items="selected_shikigami_data[index].cards"
                item-text="name"
                item-value="id"
                chips
                multiple
                hint="Choose 8 cards for your deck."
                persistent-hint
                return-object
                clearable
              >
                <template v-slot:selection="data">
                  <v-chip
                    v-bind="data.attrs"
                    :input-value="data.selected"
                    close
                    label
                    @click="data.select"
                    @click:close="remove_decks(index, data.index)"
                    color="#04002E"
                    >{{ data.item.name }}</v-chip
                  ></template
                >
              </v-select>
            </v-row>
            <!-- <div cols="12">
              {{ selected_shikigami_decks[index][index] }}
            </div> -->
            <v-row cols="12">
              <v-card
                v-for="i in selected_shikigami_decks[index][index]"
                :key="i.id"
                width="12.3%"
                color="#070042"
              >
                <!-- <div class="text-center">
                  {{ i.name }}
                </div> -->
                <div class="">
                  <v-img
                    :src="require(`@/assets/deck_of_cards/${i.url}`)"
                    class="deck-card"
                  ></v-img></div
              ></v-card> </v-row
          ></v-col>
        </v-row>
      </v-card>
    </v-row>
    <v-row>
      <!-- <v-textarea :value="construct_url()" color="teal"> </v-textarea> -->
      <v-textarea :value="construct_url()" color="teal"> </v-textarea>
    </v-row>
  </v-container>
</template>

<script>
import shikigami from "../data/shikigami_cards.json";
export default {
  data: () => ({
    selected_shikigami_names: [],
    selected_shikigami_data: [],
    selected_shikigami_decks: [{ 0: [] }, { 1: [] }, { 2: [] }, { 3: [] }],
    shikigami: shikigami,
    deck_title: "",
    deck_description: "",
  }),
  methods: {
    get_chosen_shikigami_data: function (shikigami_name) {
      for (let i = 0; i < this.shikigami.length; i++) {
        try {
          if (this.shikigami[i].name == shikigami_name) {
            return this.shikigami[i];
          }
        } catch (err) {
          console.error(err);
        }
      }
    },
    limit_shikigami: function (e) {
      if (e.length == 5) {
        e.pop();
      }
    },
    limit_decks: function (e) {
      if (e.length == 9) {
        e.pop();
      }
    },
    remove_shikigami(item) {
      const index = this.selected_shikigami_names.indexOf(item.name);
      if (index >= 0) {
        this.selected_shikigami_names.splice(index, 1);
        this.selected_shikigami_decks[index][index].splice(0);
        // shuffle shikigami down by 1
        if (index <= 3) {
          for (let j = index; j <= 2; j++) {
            for (
              let i = 0;
              i < this.selected_shikigami_decks[j + 1][j + 1].length;
              i++
            ) {
              // this if is optional?
              if (index < 3) {
                this.selected_shikigami_decks[j][j].push(
                  this.selected_shikigami_decks[j + 1][j + 1][i]
                );
              }
            }
            this.selected_shikigami_decks[j + 1][j + 1] = [];
          }
        }
      }
    },
    remove_decks(shiki_index, card_index) {
      ``;
      this.selected_shikigami_decks[shiki_index][shiki_index].splice(
        card_index,
        1
      );
      console.log(this.selected_shikigami_decks[shiki_index].shiki_index);
      console.log(shiki_index, card_index);
    },
    construct_url: function () {
      const saved_selected_shikigami_names = btoa(
        JSON.stringify(this.selected_shikigami_names)
      );
      const saved_selected_shikigami_decks = btoa(
        JSON.stringify(this.selected_shikigami_decks)
      );
      const saved_deck_title = btoa(JSON.stringify(this.deck_title));
      const saved_deck_description = btoa(
        JSON.stringify(this.deck_description)
      );
      const url = `?deck_title=${saved_deck_title}&deck_description=${saved_deck_description}&selected_shikigami_names=${saved_selected_shikigami_names}&selected_shikigami_decks=${saved_selected_shikigami_decks}`;
      return url;
    },
  },
  computed: {},
  mounted() {
    if (this.$route.query.selected_shikigami_names) {
      const saved_selected_shikigami_names = JSON.parse(
        atob(this.$route.query.selected_shikigami_names)
      );

      if (typeof saved_selected_shikigami_names != "object") {
        this.selected_shikigami_names = [];
      } else {
        this.selected_shikigami_names = [];
        for (let i = 0; i < saved_selected_shikigami_names.length; i++) {
          this.selected_shikigami_names.push(saved_selected_shikigami_names[i]);
        }
      }
    } else {
      this.selected_shikigami_names = [];
    }

    if (this.$route.query.selected_shikigami_decks) {
      const saved_selected_shikigami_decks = JSON.parse(
        atob(this.$route.query.selected_shikigami_decks)
      );

      if (typeof saved_selected_shikigami_decks != "object") {
        this.selected_shikigami_decks = [
          { 0: [] },
          { 1: [] },
          { 2: [] },
          { 3: [] },
        ];
      } else {
        this.selected_shikigami_decks = [];
        for (let i = 0; i < saved_selected_shikigami_decks.length; i++) {
          this.selected_shikigami_decks.push(saved_selected_shikigami_decks[i]);
        }
      }
    } else {
      this.selected_shikigami_decks = [
        { 0: [] },
        { 1: [] },
        { 2: [] },
        { 3: [] },
      ];
    }

    if (this.$route.query.deck_title) {
      const saved_deck_title = JSON.parse(atob(this.$route.query.deck_title));

      if (typeof saved_deck_title != "string") {
        this.deck_title = "";
      } else {
        this.deck_title = "";
        for (let i = 0; i < saved_deck_title.length; i++) {
          this.deck_title = saved_deck_title;
        }
      }
    } else {
      this.deck_title = "";
    }

    if (this.$route.query.deck_description) {
      const saved_deck_description = JSON.parse(atob(this.$route.query.deck_description));

      if (typeof saved_deck_description != "string") {
        this.deck_description = "";
      } else {
        this.deck_description = "";
        for (let i = 0; i < saved_deck_description.length; i++) {
          this.deck_description = saved_deck_description;
        }
      }
    } else {
      this.deck_description = "";
    }
  },
  watch: {
    selected_shikigami_names: function () {
      this.selected_shikigami_data = [];
      for (let i = 0; i < this.selected_shikigami_names.length; i++) {
        for (let j = 0; j < this.shikigami.length; j++) {
          try {
            if (this.shikigami[j].name == this.selected_shikigami_names[i]) {
              this.selected_shikigami_data.push(this.shikigami[j]);
            }
          } catch (err) {
            /* nothing */
          }
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.v-chip .v-avatar {
  height: 60px !important;
  width: 60px !important;
}

.deck-card:hover {
  position: relative;
  animation: scaleMe 500ms ease-in-out 0s forwards;
  z-index: 100;
}

@keyframes scaleMe {
  100% {
    transform: scale(1.25);
  }
}

.v-textarea textarea {
  padding: 50px 0px 0px 0px !important;
}

.user-deck-title {
  font-size: 50px !important;
  // margin-top: 50px !important;
  // margin-bottom: -50px !important;
}
</style>

<style lang="scss">
.user-deck-title textarea {
  padding-top: 10px !important;
  padding-bottom: 15px !important;
  text-align: center;
}
</style>
