//Define the Github User ID
const userId = 'skaytech';

/*
Function to fetch data using XMLHTTPRequest
The function uses Promise to resolve, reject based on external API response
*/
const fetchData = function(userId) {

    return new Promise((resolve, reject) => {
        //Initialize xhr to a new XMLHttpRequest object 
        const xhr = new XMLHttpRequest();

        // Define the parameters to call an External API
        // Calling the Github getUsers API by userId
        // Params are - HTTP Method name, URL, Async (true/false)
        // When the third param is 'true', it means it's an asynchronous request
        xhr.open(
            'GET', `https://api.github.com/users/${userId}`, true);

        //The onload method will execute when a response has been received from external API
        xhr.onload = function() {
            //Checking for a response of 200 (It's a success (OK) response)
            if (xhr.status === 200) {
                //On success - resolve the promise and send response as a parameter
                resolve(xhr.responseText);
            } else {
                //On Error - reject the promise and pass the HTTP status as a parameter
                reject(xhr.status);
            }
        }

        //Upon Send the XMLHttpRequest will actual be processed
        //This is the method that actually triggers the API call
        xhr.send();
    });
}

//UI method to display the picture of Github User
function displayUserPicture(response) {
    const data = JSON.parse(response);
    const imgUrl = data.avatar_url;
    document.querySelector('#userimg').setAttribute('src', imgUrl);
}

//UI method to display Error if the Github User does not exits
function onError(status) {
    document.querySelector('#userimg').style.display = 'none';
    document.querySelector('#errorDiv').textContent = `Error Status: ${status}`;
}

//Invoke the fetch data function & pass the userId as a parameter
//then function is invoked upon success
//catch function will be invoked upon error
fetchData(userId)
    .then(response => displayUserPicture(response))
    .catch(err => onError(err));