'use strict';

{
    function fetchJSON(url, cb) {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url);
        xhr.responseType = 'json';
        xhr.onload = () => {
            if (xhr.status >= 200 && xhr.status <= 299) {
                cb(null, xhr.response);
            } else {
                cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`));
            }
        };
        xhr.onerror = () => cb(new Error('Network request failed'));
        xhr.send();
    }

    function createAndAppend(name, parent, options = {}) {
        const elem = document.createElement(name);
        parent.appendChild(elem);
        Object.keys(options).forEach(key => {
            const value = options[key];
            if (key === 'text') {
                elem.textContent = value;
            } else {
                elem.setAttribute(key, value);
            }
        });
        return elem;
    }

    function main(url) {
        fetchJSON(url, (err, repositories) => {
            const root = document.getElementById('root');
            if (err) {
                createAndAppend('div', root, { text: err.message, class: 'alert-error' });
                return;
            }

            for (let repository of repositories) {
                showContributors(repository)
            }

            // createAndAppend('pre', root, { text: JSON.stringify(repositories, null, 2) });
        });
    }

    function showContributors(data) {
        let contributors = document.getElementById('contributors');
        contributors.innerHTML = '';
        fetchJSON(data.contributors_url, (err, listOfContributors) => {
            if (listOfContributors != null && typeof listOfContributors == 'object') {
                console.log("TCL: showContributors -> listOfContributors", listOfContributors)

                for (let contributor of listOfContributors) {
                    createAndAppend('img', contributors, { src: contributor.avatar_url, class: 'contri' });
                    createAndAppend('div', contributors, { text: contributor.login, class: 'contri' });
                    createAndAppend('div', contributors, { text: contributor.contributions, class: 'contri' });
                }
            }
        })
    }

    const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
    window.onload = () => main(HYF_REPOS_URL);
}