(async function  responseData() {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    const users = await response.json();

    const table = document.getElementById("main");

    var tr = table.rows;

    for (var i = 1; i < tr.length; i++) {

        for (var j = 0; j < tr[i].children.length; j++) {
            switch (j) {
                case 0 : {
                    tr[i].children[j].innerHTML = users[i].name;
                    break;
                }
                case 1: {
                    tr[i].children[j].innerHTML = users[i].username;
                    break;
                }
                case 2 : {
                    tr[i].children[j].innerHTML = users[i].email;
                    break;
                }
                case 3 : {
                    tr[i].children[j].innerHTML = users[i].website;
                    break;
                }
            }

        }
    }
    for (let i = 1; i < tr.length; i++) {
        tr[i].addEventListener("click", function () {
            const info = document.querySelector(".information");

            const values = [];

            info.innerHTML = `${getProp(users[i], 3, [])}`;



            function getProp(obj, k, values) {
                let count = 1;

                    for(var i in obj) {
                        if(typeof(obj[i]) === 'object') {
                             getProp(obj[i], k - 1, values  );
                        } else {
                            values.push(obj[i]);

                            if ((k === 1) && (count ===obj[i].length)){
                                return null;
                            }
                        }
                        count++;
                    }
                    return values;
            }


            info.style.display = "block";

            info.addEventListener("click", function () {
                info.style.display = "none";
            })

        })
    }

    function sortIncrease(e) {
        if (e.target.tagName != "TH") return;

        const index = e.target.cellIndex;
        const tbody = table.getElementsByTagName('tbody')[0];

        const rowsArray = [];

        for (let i = 0; i < tbody.rows.length; i++) {
            rowsArray.push(tbody.rows[i].children[index].innerHTML)
        }

        rowsArray.sort();

        for (let i = 0; i < tbody.rows.length; i++) {
            tbody.rows[i].children[index].innerHTML = rowsArray[i];
        }

        table.removeEventListener("click", sortIncrease)
        table.addEventListener("click", sortDecrease);
    }

    function sortDecrease(e) {
        if (e.target.tagName != "TH") return;

        const index = e.target.cellIndex;
        const tbody = table.getElementsByTagName('tbody')[0];

        const rowsArray = [];

        for (let i = 0; i < tbody.rows.length; i++) {
            rowsArray.push(tbody.rows[i].children[index].innerHTML)
        }

        rowsArray.reverse();

        for (let i = 0; i < tbody.rows.length; i++) {
            tbody.rows[i].children[index].innerHTML = rowsArray[i];
        }

        table.removeEventListener("click", sortDecrease)
        table.addEventListener("click", sortIncrease);
    }

    table.addEventListener("click", sortIncrease)

})();