const elf = document.getElementById("elf")
const btn = document.getElementById("btn")

btn.addEventListener("click", duplicateElf)

function duplicateElf() {
    // Task:
    // - Write a function to duplicate the elf when the button is clicked.
    // - See index.css for optional styling challenges.
    // Note: each '🧝' emoji counts as 2 characters (i.e. textContent.length goes up by 2)
    // Counting emojis logic from https://stackoverflow.com/questions/54369513/how-to-count-the-correct-length-of-a-string-with-emojis-in-javascript
    let numEmojis = [...elf.textContent].length
    if (numEmojis < 100) {
        // 50/50 chance of getting another elf or (tools or tea)
        let newEmoji = Math.floor(Math.random() * 100) >= 50 ? '🧝' : giveToolsOrTea()
        elf.textContent += newEmoji
    } else {
        console.log('Max number of elves reached (100)!')
        btn.disabled = true
    }

}

function giveToolsOrTea() {
    const tools = ['⚒', '🔨', '🛠', '🔬', '🔭']
    const tea = ['🍵', '🧉']
    // 50/50 change of getting either a tool or tea
    return Math.floor(Math.random() * 100) >= 50 ? random_item(tools) : random_item(tea)
}

function random_item(items) {
    return items[Math.floor(Math.random() * items.length)];
}

// Stretch goals:
// - Write a function to give the elves some tools, or a cup of tea!
// - Limit the total number of elves to 100.