let db = firebase.firestore();
let starsRef = db.collection('starSign');

let app = new Vue({
  el: '#vue',
    template: `
    <div class="vueApp">
      <h1>Zodiac Sign Search</h1>
      <input placeholder="Search a date (MM/DD  eg.09/07)" v-model="starSearch" />
      <h2>Zodiac Signs</h2>    
      <transition name="openUp">
        <transition-group name="openUp" class="stars">
          <div class="star" v-for="(star, index) in filteredStars" v-bind:key="index"  v-bind:style="{ backgroundColor: star.hex }">
            <h3>{{ star.id }}</h3>
            <img :src="star.pic">
            <p>Date: {{ star.date }}</p>
            <p>Element: {{ star.element }}</p>
            <p>Lucky Color: {{ star.luckyColor }}</p>
            <p>Lucky Number: {{ star.luckyNumber }}</p>
            <p>Symbol: {{ star.symbol }}</p>
            <br>
            <p>Traits:<br>{{ star.traits }}</p> 
          </div>
        </transition-group>
      </transition>
    </div>`,
  
  data: {
    stars: [],
    starSearch: '',
  },
  
  computed: {
    filteredStars: function() {
      let self = this;
      return this.stars.filter(function(star) {
        let parts = self.starSearch.trim().split(" ");
        for(let part of parts) {
          let searchRegex = new RegExp(part, 'i');
          if(!(
            searchRegex.test(star.id) ||
            searchRegex.test(star.datedate) ||
            searchRegex.test(star.element) ||
            searchRegex.test(star.luckyColor) ||
            searchRegex.test(star.luckyNumber) ||
            searchRegex.test(star.symbol)
          )) {
            return false;
          }
        }
        return true;
      })
    }
  },
  
  methods: {
    readStars() {
      let starsArr = [];    starsRef.get().then(querySnapshot => {
        // console.log(querySnapshot)
        querySnapshot.forEach(doc => {
          console.log(doc.data())
          starsArr.push(doc.data())
        })
        this.stars = starsArr
      }).catch(error => {
        console.log(error)
      })
    }
  },
  
  mounted() {
    this.readStars()
  }
});