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

/*
Function to fetch data using XMLHTTPRequest
Function accepts callback to invoke upon success
*/
const fetchData = function(userId, callback) {
    //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 - invoke the callback method passed to the function
            callback(xhr.responseText);
        } else {
            //On Error - invoke the onError method and pass the HTTP status
            onError(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 fetchData method
//Params - userId & displayUserPicture is the callback function
fetchData(userId, displayUserPicture);