SPELL

// First set of fetched data starts with page 1
let pageNumber = 1;
let term = '';

// 1. Define endpoint, fetch response and return data promise
const search = async () => {
    const key = 'aroplosuitin';

    const endpoint = `https://api.europeana.eu/record/v2/search.json`,
        query = `?wskey=${key}&query=${term}&start=${pageNumber}&rows=5&profile=rich'`;

    const response = await fetch(endpoint + query);

    // Check response status:
    if (response.status !== 200) {
        throw new Error('Cannot fetch data. Response status is not 200.');
    }

    const data = await response.json();

    return data;
};

// 2. Call search and return data promise
const searchEuropeana = async () => {
    const data = await search();

    return data;
};

// 3. Grab the input and invoke callback to update the UI
const searchForm = document.querySelector('#search-form');

searchForm.addEventListener('submit', (e) => {
    e.preventDefault();

    // grab user input
    term = searchForm.search.value.trim();
    // reset form on submit
    searchForm.reset();

    // For errors
    const errorOutput = document.querySelector('.error');

    // Invoke searchEuropeana
    searchEuropeana()
        .then((data) => {
            updateUI(data);
            console.log(data);
        })
        .catch((error) => {
            console.log('An error occured:', error),
                (errorOutput.innerText = 'Check your spelling or network.');
        });
});

// 4. Update the UI with HTML template
const updateUI = (data) => {
    console.log(data);
};

// 5. Previous / Next results
const previousBtn = document.querySelector('#previousBtn'),
    nextBtn = document.querySelector('#nextBtn');

previousBtn.addEventListener('click', () => {
    if (pageNumber > 1) {
        pageNumber--;
    } else {
        return;
    }
    console.log(pageNumber);
    searchEuropeana();
});

nextBtn.addEventListener('click', () => {
    pageNumber++;
    console.log(pageNumber);
    searchEuropeana();
});