const btn = document.getElementById('btn');
const btnPrev = document.getElementById('btn-prev');
const imageContainer = document.querySelector('.image-container');

const desserts = [];
let currentImage = 0;

async function goNext() {
    currentImage++;
    if (currentImage + 1 > desserts.length || currentImage > desserts.length) {
        btn.textContent = 'Generate one more';
    }
    if (currentImage > desserts.length) {
        const res = await fetch('https://foodish-api.com/api/images/dessert');
        const data = await res.json();
        imageContainer.innerHTML = `<img src=${data.image} alt="Dessert image">`;
        desserts.push(data.image);
    } else {
        imageContainer.innerHTML = `<img src=${desserts[currentImage - 1]} alt="Dessert image">`;
    }
    if (currentImage > 1) btnPrev.classList.remove('hidden');
}

function goBack() {
    currentImage--;
    imageContainer.innerHTML = `<img src=${desserts[currentImage - 1]} alt="Dessert image">`;
    btn.textContent = 'Next dessert';
    if (currentImage === 1) btnPrev.classList.add('hidden');
}

btn.addEventListener('click', goNext);
btnPrev.addEventListener('click', goBack);

/* Task:
Call the Foodish API (https://foodish-api.herokuapp.com/) and display random images of desserts on the click of a button.

Specific URL to get a random dessert image: 
https://foodish-api.herokuapp.com/api/images/dessert

Stretch goals: 
- Show multiple desserts.
- Add the functionality to go back to the previous image.
*/