<div id="app">
    <button @click="add">Add animal</button>
    <button @click="remove">Remove animal</button> </br>
    <button @click="switchMode">Switch Mode: {{mode}}</button> 
    <button @click="switchColumns" v-show="mode === 'Type'">Switch Columns</button>
    <transition-group name="list" tag="fence" class="grid">
      <component
           v-for="(animal, key) in animals"
           :key="key + 'animal'"
           :style="animalgrid(animal)"
           :is="animal.type"
         >{{animal.type === 'sheep' ? '🐑' : '🐄'}} {{animal.name}}</component>
    </transition-group>
</div>

// Setup Grid and Counter
fence {
  display: grid;
  grid-auto-flow: dense; 
  counter-reset: countsheep countcow;
}

// Use the Counter
sheep::before {
  counter-increment: countsheep;  
  content: counter(countsheep); 
}

cow::before {
  counter-increment: countcow;  
  content: counter(countcow); 
}

// Quantitiy Query - Turns the column red when too many sheep or cows
sheep:nth-last-of-type(n+10),
sheep:nth-last-of-type(n+10) ~ sheep,
cow:nth-last-of-type(n+10),
cow:nth-last-of-type(n+10) ~ cow,{
  background-color:rgb(150, 30, 40);
}

//Animation
.list-move {
  transition: transform 0.5s;
}

.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

new Vue({
  el: '#app',
  data() {
    return {
      switch: false,
      mode: 'Type',
      animals: [
         {
            name: 'Aaron',
            type: 'sheep'
         },
         {
            name: 'Donald',
            type: 'cow'
         },
         {
            name: 'Berta',
            type: 'cow'
         },
         {
            name: 'Chrissy',
            type: 'cow'
         },
      ],
      animalnames: [    
          'Dennis',
          'Cesar',
          'Christian',
          'Brutus',
          'Anton',
          'Aiden',
          'Alfonso',
          'Berta',
          'Afton',
          'David',
          'Dennis',
          'Christoph',
          'Casandra',
          'Cleo',
          'Aurelius',
          'Benjamin',
          'Aaron',
          'Chanel',
          'Dara',
          'Deedee']
    };
  },
  methods: {
    switchColumns() {
      this.switch = !this.switch 
    },
    switchMode() {
      if (this.mode === 'Type') {
         this.mode = 'Alphabetical'
      } else {
         this.mode = 'Type'
      }
    },
    animalgrid(animal) {
        if (this.mode === 'Type') {
           if (animal.type === 'cow'){
               return {
                  'grid-column': this.switch ? 1 : 2,
                  'z-index': 1,
               }
           } else {
              return {
                  'grid-column': this.switch ? 2 : 1,
              }
           }
        } else {
          let column
          switch (animal.name.charAt(animal.name).toLowerCase()) {
                 case 'a':
                   column = 1;
                   break;
                 case 'b':
                   column = 2;
                   break;
                 case 'c':
                   column = 3;
                   break;
                 case 'd':
                   column = 4;
                   break;
                 default:
                   column = 5;
                   break;
          }
          return {
               'grid-column': column,
          }
        }       
    },
    add() {
      if (Math.random() < 0.33) {
        this.animals.push({ 
           type: "sheep", 
           name: this.animalnames[Math.floor(Math.random()*this.animalnames.length)] });
      } else {
        this.animals.push({ 
           type: "cow", 
           name: this.animalnames[Math.floor(Math.random()*this.animalnames.length)] });
      }
    },
    remove() {
      this.animals.pop()
    }
  }
});