'use strict';

    const URL_Rep = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
    function renderRepository(container, repository) {
        let dateOfRepository = new Date(repository.updated_at);
        container.innerHTML = "";
        const innerTable = createAndAppend("table", container);
        const tBody = createAndAppend("tbody", innerTable);
        const tr = createAndAppend('tr', tBody);
        createAndAppend('td', tr, {text: "Repository:", class: "nameRow"});
        const tdForLink = createAndAppend('td', tr,);
        createAndAppend('a', tdForLink, {text: repository.name, href: repository.html_url})
        const tr1 = createAndAppend('tr', tBody);
        createAndAppend('td', tr1, {text: "Description:", class: "nameRow"});
        createAndAppend('td', tr1, {text: repository.description});
        const tr2 = createAndAppend('tr', tBody);
        createAndAppend('td', tr2, {text: "Forks:", class: "nameRow"});
        createAndAppend('td', tr2, {text: repository.forks});
        const tr3 = createAndAppend('tr', tBody);
        createAndAppend('td', tr3, {text: "Updated:", class: "nameRow"});
        createAndAppend('td', tr3, {text: dateOfRepository.toLocaleString()});


    }
    //contributors box
    function renderContributors(containerForContributors, repository) {
        containerForContributors.innerHTML = "";
        const contributorsURL = repository['contributors_url'];
        createAndAppend('p', containerForContributors, { text: 'Contributions' });
        fetchJSON(contributorsURL)
            .catch(err => {
                createAndAppend('div', containerForContributors, { text: err.message, class: 'alert-error' });
              })

              .then(contributors => {
                const contributorsTable = createAndAppend('table', containerForContributors, { id: 'contributorsTable' });

                const contributorsTbody = createAndAppend('tbody', contributorsTable, { id: 'contributorsTbody' });
               
                contributors.forEach(contributor => {

                    const contLink = contributor.html_url;
                    const contImg = contributor.avatar_url;
                    const contName = contributor.login;
                    const contNum = contributor.contributions;
                    const contributorsLink = createAndAppend('a', contributorsTbody, { href: contLink, target: '_blank', class: 'contributorsLink' });

                const contributorsTr = createAndAppend('tr', contributorsLink, { id: `${contributor['id']}`, class: 'contributorsTr' });

                const tdImg = createAndAppend('td', contributorsTr, { id: `${contName}Td`, class: 'inform-contrib' });

                createAndAppend('img', tdImg, { src: contImg, alt: `picture of ${contName}`, class: 'contributor-images' });

                createAndAppend('td', contributorsTr, { text: contName, class: 'inform-contrib contributor-name' });

                createAndAppend('td', contributorsTr, { text: contNum, class: 'inform-contrib contributor-number' });
            });
        })
    }
    

    function main(url) {
       const root = document.getElementById('root');
       const divForSelect = createAndAppend('div', root, {id: "container-select"});
       createAndAppend('h5', divForSelect, {text: "HYF Repositories", class: "heading"});
       const select = createAndAppend('select', divForSelect, {id: "menu"});
       const container = createAndAppend('div', root, {id: "first-container"});
       const containerForContributors = createAndAppend('div', root, {id: "second-container"})

    fetchJSON(url)
        .catch(err => {
            container.innerHTML = error.message;
            return;
        })
    
        .then(repositories => {
        
            repositories.sort((a, b) => a.name.localeCompare(b.name));

            repositories.forEach((repository, index) => {
            createAndAppend('option', select, { text: repository.name, value: index });
        });
        
        select.addEventListener('change', (event) => {
            renderRepository(container, repositories[event.target.value])
            renderContributors(containerForContributors, repositories[event.target.value])
        });

        renderRepository(container, repositories[0]);
        renderContributors(containerForContributors, repositories[0])
    })
    }
    window.onload = () => main(URL_Rep);