export function searchPhotos(value, page) {
    // Get token from cookies.
    let token = document.cookie.split('=')[1];
    // Get image container from DOM.
    let imgContainer = document.getElementById('imgContainer');

    // Reset imgContainer content to avoid mix of search results.
    // if (document.querySelectorAll('img') != 0) {
    //     imgContainer.innerHTML = "";
    // }

    fetch(`https://api.unsplash.com/search/photos?page=${page}&per_page=30&query=${value}`, {
        method: 'get',
        headers: {
            'Authorization': `Bearer ${token}`,
        }
    })
    .then(response => response.json())
    .then(res => {
        // Display random images to page
        res.results.forEach(item => {
            imgContainer.innerHTML += `<img class="card-img mb-3" src=${item.urls.small} large="${item.urls.small}" data-toggle="modal" data-target=".bd-example-modal-lg" alt="Card image">`;

            // Get all displayed images.
            let getImages = document.querySelectorAll('img');
            // Get modal.
            let getModal = document.getElementById('imgModal');

            // Add click event for each img and set inner html of modal.
            getImages.forEach(img => {
                img.addEventListener('click', (event) => {
                    getModal.innerHTML = `<img src="${event.target.getAttribute('large')}">`;
                })
            })
        });
        window.isFetching = false;
    });
}



// export async function searchPhotos(value) {

//     // Get token from cookies.
//     let token = document.cookie.split('=')[1];
//     // Get image container from DOM.
//     let imgContainer = document.getElementById('imgContainer');

//     // Reset imgContainer content to avoid mix of search results.
//     if (document.querySelectorAll('img') != 0) {
//         imgContainer.innerHTML = "";
//     }

//     await fetch(`https://api.unsplash.com/search/photos?page=1&query=${value}`, {
//         method: 'get',
//         headers: {
//             'Authorization': `Bearer ${token}`,
//         }
//     })
//     .then(response => response.json())
//     .then(res => {
//         // Display random images to page
//         res.results.forEach(item => {
//             imgContainer.innerHTML += `<img class="card-img mb-3" src=${item.urls.small} large="${item.urls.small}" data-toggle="modal" data-target=".bd-example-modal-lg" alt="Card image">`;
//         });
//     });

//     // Get all displayed images.
//     let getImages = document.querySelectorAll('img');
//     // Get modal.
//     let getModal = document.getElementById('imgModal');

//     // Add click event for each img and set inner html of modal.
//     getImages.forEach(img => {
//         img.addEventListener('click', (event) => {
//             getModal.innerHTML = `<img src="${event.target.getAttribute('large')}">`;
//         })
//     })
// }