const BASE = `https://dummyapi.io/data/api/`

function get_collection(collection) {
    let request = new XMLHttpRequest();
    request.open('GET', `${BASE}${collection}`);
    request.setRequestHeader('app-id', '5f76987a523f015e7c5ae49b');
    request.onload = function () {
        let prefix = collection.includes('/') ? '' : `<h1>${collection}s</h1>`;
        document.getElementById(collection).innerHTML = (
             prefix + JSON.parse(request.response).data.map(
                function (member) {
                    let c = collection.slice(-4);
                    let id = member.id;
                    if (c == 'post')
                        id += '/comment';

                    let call = `"get_member('${c}', '${id}')"`;
                    if (c == 'post')
                        return `<button onclick=${call}/>${member.text}</button>
                                <div id=${id}></div>`;

                    let repr = `${member.firstName} ${member.lastName}`;
                    return `<div id=${id}>
                              <button onclick=${call}/>${repr}</button>
                            </div>`;
                }).join("\n"));
    }
    request.send();
}

function user_format(r) {
    let l = r.location;
    return `<h2>${r.title} ${r.firstName} ${r.lastName}</h2>
            <div id='user/${r.id}/post'>
              <button onclick="get_collection('user/${r.id}/post')">
                List posts
              </button>
            </div>
            <p>gender: ${r.gender}</p>
            <p>email: ${r.email}</p>
            <p>date of birth: ${r.dateOfBirth}</p>
            <p>register date: ${r.registerDate}</p>
            <p>phone: ${r.phone}</p>
            <p>picture: ${r.picture}</p>
            <p>location: ${l.street}, ${l.city}, ${l.state}, ${l.country}</p>`
}

function post_format(r) {
    return r.data.map(comment => `<p>${comment.message}</p>`).join("\n");
}

function get_member(collection, member) {
    let request = new XMLHttpRequest();
    console.log(`${BASE}${collection}/${member}`);
    request.open('GET', `${BASE}${collection}/${member}`);
    request.setRequestHeader('app-id', '5f76987a523f015e7c5ae49b');
    request.onload = function () {
        let format = collection == 'user' ? user_format : post_format;
        document.getElementById(member).innerHTML = format(
            JSON.parse(request.response));
    }
    request.send();
}