function runFetch(){
    let myPromise = fetch('https://swapi.dev/api/people/1/')
        .then(res => res.json())
        .then(luke => {
            createTable(luke, document.body);
        });

    createTable = (name, DomElem) => {
        let table = document.createElement('table');
        DomElem.appendChild(table);
        console.log(DomElem.appendChild(table));

        for (let key in name) {
            let tr1 = document.createElement('tr');
            let th1 = document.createElement('th');
            th1.innerHTML = key;

            let td = document.createElement('td');
            if (typeof name[key] === 'number') {
                td.innerHTML = name[key];
            } else if (name[key].includes('https://swapi.dev/api/')) {
                let input = document.createElement('input');
                input.type = 'button';
                input.value = `${[key]}`;
                td.appendChild(input);

                input.onclick = () => {
                    fetch(`${name[key]}`)
                        .then(res => res.json())
                        .then(data => {
                            createTable(data, document.body);
                        });
                };
            } else if (Array.isArray(name[key])) {
                let count = 1;
                name[key].forEach(url => {
                    let input = document.createElement('input');
                    input.type = 'button';
                    input.value = `${count++}`;

                    td.appendChild(input);

                    input.onclick = () => {
                        fetch(`${url}`)
                            .then(res => res.json())
                            .then(data => {
                                console.log(data);
                                createTable(data, document.body);
                            });
                    };
                });
            } else {
                td.innerHTML = name[key];
            }
            tr1.appendChild(th1);
            tr1.appendChild(td);
            table.appendChild(tr1);
        }
    };
}

function runMyFetch() {
    function myFetch(url) {
        return new Promise(function (resolve, reject) {
            const xhr = new XMLHttpRequest();
            console.log(url);
            xhr.open('GET', url);
            xhr.send();
            xhr.onload = function () {
                console.log(xhr.status, xhr.readyState);
                if (xhr.readyState === 4 && xhr.status === 200) {
                    resolve(JSON.parse(xhr.responseText));
                }
            };
            xhr.onerror = function () {
                reject(`Ошибка ${xhr.status}${xhr.statusText}`);
            };
        });
    }
    myFetch('https://swapi.dev/api/people/1/')
        .then(luke => console.log(luke));
}


function runRace() {
    function myFetch(url) {
        return new Promise(function (resolve, reject) {
            const xhr = new XMLHttpRequest();
            console.log(url);
            xhr.open('GET', url);
            xhr.send();

            xhr.onload = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    resolve(JSON.parse(xhr.responseText));
                }
            };
            xhr.onerror = function () {
                reject(`Ошибка ${xhr.status}${xhr.statusText}`);
            };
        })
    }
    let randomSpeed = (Math.random() * 1000).toFixed(1);
    let delay = () => setTimeout(() => console.log(`я тут через ${randomSpeed} ms`), randomSpeed );

    Promise.race([myFetch('https://swapi.dev/api/people/1/')
        .then(luke => console.log(luke)), delay()]);
}


const tasksArray = [
    ['fetch basic + improved', runFetch],
    ['my fetch', runMyFetch],
    ['race', runRace],
];

const $list = document.querySelector('.list');
tasksArray.forEach(task => {
    const [name, callback] = task;

    const $div = document.createElement('div');
    $div.className = 'div';

    let $button = document.createElement('button');
    $button.textContent = 'Запустить';
    $button.className = 'button';
    $button.onclick = callback;
    $div.appendChild($button);

    const $li = document.createElement('li');
    $li.className = 'li';
    $li.textContent = name;
    $div.appendChild($li);
    $list.appendChild($div);
});