/* AUTHOR: Katerina Navab
 * Built with Vue v3.x.x
 */

/*
TODO: Implement feedback below

One tip I have. It's not wrong to have 4 arrays for each group. But a more sophisticated (and probably more conventional way) of doing this would be to have 1 array for your zoo (all animals) but within it have sub-arrays to group things.

zooGroups = [
  [],
  [],
  [],
  []
]

What this allows then, is for your TEMPLATE to process these as a more frictionless routine.

// refers to each item in zooGroups, an array of animals
<parent v-for="group in zooGroups">

  // sub-loop to go through each item in the group, an animal emoji
  <div v-for="animal in group">
    <div>{{ animal }}</div>
  </div>
</parent>

Thinking of groups? Always think the group is an array structure somehow. So then the question might be, how do I CREATE an array in arrays? This is where you can do some computation using... compute!

computed: {
  animalGroups() {
    return // somehow generate the array in array structure based on your criteria
  }
}

This type of thinking is the next step for you. How can you take advantage of the characteristics of arrays and objects to more efficiently build / structure you data which then translates into conceptual representations? Very cool stuff and I like where you're at.
*/

const App = Vue.createApp({
	data() {
		return {
			allAnimals: [
				"🐶",
				"🐱",
				"🐭",
				"🐹",
				"🐰",
				"🦊",
				"🐻",
				"🐼",
				"🐨",
				"🐯",
				"🦁",
				"🐮",
				"🐷",
				"🐸",
				"🐵",
				"🐒",
				"🐔",
				"🐧",
				"🐦",
				"🐤",
				"🐣",
				"🐥",
				"🦆",
				"🦅",
				"🦉",
				"🦇",
				"🐺",
				"🐗",
				"🐴",
				"🦄",
				"🐝",
				"🐛",
				"🦋",
				"🐌",
				"🐞",
				"🐜",
				"🕷",
				"🐢",
				"🐍",
				"🦎",
				"🦂",
				"🦀",
				"🦑",
				"🐙",
				"🦐",
				"🐠",
				"🐟",
				"🐡",
				"🐬",
				"🦈",
				"🐳",
				"🐋",
				"🐊",
				"🐆",
				"🐅",
				"🐃",
				"🐂",
				"🐄",
				"🦌",
				"🐪",
				"🐫",
				"🐘",
				"🦏",
				"🦍",
				"🐎",
				"🐖",
				"🐐",
				"🐏",
				"🐑",
				"🐕",
				"🐩",
				"🐈",
				"🐓",
				"🦃",
				"🕊",
				"🐇",
				"🐁",
				"🐀",
				"🐿",
				"🦓",
				"🦒",
				"🦔",
				"🦕",
				"🦖"
			],
			numAnimals: 4,
			zooGroupA: [],
			zooGroupB: [],
			zooGroupC: [],
			zooGroupD: []
		};
	},
	methods: {
		generateAnimals() {
			this.zooGroupA = [];
			this.zooGroupB = [];
			this.zooGroupC = [];
			this.zooGroupD = [];
			for (let i = 0; i < this.numAnimals; i++) {
				this.zooGroupA.push(
					this.allAnimals[Math.floor(Math.random() * this.allAnimals.length)]
				);
				this.zooGroupB.push(
					this.allAnimals[Math.floor(Math.random() * this.allAnimals.length)]
				);
				this.zooGroupC.push(
					this.allAnimals[Math.floor(Math.random() * this.allAnimals.length)]
				);
				this.zooGroupD.push(
					this.allAnimals[Math.floor(Math.random() * this.allAnimals.length)]
				);
			}
		}
	}
});

App.component("emoji-component", {
	props: ["emoji"],
	data() {
		return {};
	},
	template: '<div class="emoji">{{ this.emoji }}</div>'
});

App.mount("#app");