/* Рекурсия: HTML tree
Используя решение этого задания сделайте функцию, которая рекурсивно создает HTML-строку из древовидной структуры данных Javascript любой вложенности. Проверьте результат работы функции выводя HTML-строку используя document.write или же какой-то_элемент.innerHTML*/

const table = {
    tagName: 'table',
    attrs: {
        border: "1",
    },
    children: [
        {
            tagName: 'tr',
            children: [
                {
                    tagName: "td",
                    children: ["1x1"],
                },
                {
                    tagName: "td",
                    children: ["1x2"],
                },
            ]
        },
        {
            tagName: 'tr',
            children: [
                {
                    tagName: "td",
                    children: ["2x1"],
                },
                {
                    tagName: "td",
                    children: ["2x2"],
                },
            ]
        }
    ]
}
//htmlTree(table) //вернет <table border='1' ....

let result = ""
function recursion (obj, str="") {
    console.log(obj.tagName)
    result += "<" + obj.tagName
    if (obj.attrs){
        for (property in obj.attrs) {
            result += ' ' + property + '="' + obj.attrs[property] + '"'
        }
    }
    result += ">"

    console.log(obj.children)
    
    let children
    if (obj.children){

        children = obj.children
        for (const obj of children){
            console.log(obj)
        if (typeof obj !== 'object') {
            result += obj
        }
        if(typeof obj === 'object') {
            recursion (obj, str)
        }
        }

    }

    result += "</" + obj.tagName + ">"
}

recursion(table)
console.log(result)

result =""

const body = {
    tagName : 'body',
    children : [
        {
            tagName : 'div',
            children : [
                {
                    tagName : 'span',
                    children : ['Enter a data please:']
                },
                {
                    tagName : 'br'
                },
                {
                    tagName : 'input',
                    attrs : {
                        type : 'text',
                        id : 'name'
                    }
                },
                {
                    tagName : 'input',
                    attrs : {
                        type : 'text',
                        id : 'surname',
                    }
                }
            ]
        },
        {
            tagName : 'div',
            children : [
                {
                    tagName : 'button',
                    attrs : {
                        id : 'ok'
                    },
                    children : ['OK']
                },
                {
                    tagName : 'button',
                    attrs : {
                        id : 'cancel'
                    },
                    children : 'Cancel'
                },
            ]
        }
    ]
}

recursion(body)
console.log(result)