function createBtn(text) {
    let btn = document.createElement('button')
    btn.innerText = `${text}`
    return btn
}

function drawObjTable(parent, obj) {
    let table = document.createElement('table')
    table.border = 1
    table.style.border = '5px double grey'
    let closeRow = document.createElement('tr')
    let closeTd = document.createElement('td')
    closeTd.style.border = 'none'
    let closeBtn = createBtn('Close table')
    closeBtn.style.backgroundColor = 'firebrick'
    closeBtn.style.color = 'white'
    closeBtn.onclick = () => parent.removeChild(table)

    closeTd.append(closeBtn)
    closeRow.append(closeTd)
    table.append(closeRow)

    for (let key in obj) {
        let tr = document.createElement('tr')
        let tdKey = document.createElement('td')
        tdKey.innerText = key
        tdKey.style.backgroundColor = 'black'
        tdKey.style.color = 'white'

        let tdValue = document.createElement('td')
        tdValue.style.backgroundColor = 'grey'
        tdValue.style.color = 'whitesmoke'

        if (obj[key].constructor.name === 'Array') {
            let i = 0
            for (let item of obj[key]) {
                i++;
                console.log('current', item)
                if (typeof item === 'string' && /^(https:\/\/|http:\/\/)/.test(item)) {
                    let btn = createBtn('Loading...')

                    
                    fetch(item)
                        .then((res) => {
                            if(res.ok) {
                                return res.json()
                            } else {
                                throw new Error()
                            }
                        
                        })
                        .then(obj => {
                            btn.innerText = obj[Object.keys(obj)[0]]
                            btn.onclick = () => { drawObjTable(container, obj) }
                        })
                        .catch((e) => {
                            console.warn('something bad happened. ',e)    
                            btn = document.createElement('a')
                            btn.innerText =  item
                            btn.href = item
                        })

                    tdValue.append(btn)
                } else {
                    tdValue.innerText = item
                }
            }
        } else if (typeof obj[key] === 'string' && /^(https:\/\/|http:\/\/)/.test(obj[key])) {
            let btn = createBtn(key)
            try {
                fetch(obj[key])
                    .then(res => res.json())
                    .then(obj => {
                        btn.innerText = obj[Object.keys(obj)[0]]
                        btn.onclick = () => { drawObjTable(container, obj) }
                    })
            } catch(e) {
                console.warn('something bad happened. ',e)
            }

            tdValue.append(btn)
        } else {
            tdValue.innerText = obj[key]
        }

        tr.append(tdKey, tdValue)
        table.append(tr)
    }
    parent.append(table)
}

let container = document.createElement('div')
document.body.append(container)

fetch('https://swapi.dev/api/people/1/')
    .then((res) => {
        if(res.ok) {
            return res.json()
        } else {
            throw new Error()
        }
    })
    .then(luke => {
        drawObjTable(container, luke)
    })
    .catch((e) => console.warn('something bad happpened ', e))