//ES6
//ES6: Таблица умножения
let f;
let str = "<table class='table'>";

str += "<tr class='horizontal-table-head'><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>";

for(let i = 1; i < 10; i++) {
    str += `<tr><td>${i}</td>`; //Использование ${} внутри `` скобочек было добавлено в ES6
    for(let j = 1; j < 10; j++) {
        f = (i, j) => str += `<td>${i*j}</td>`; //Использование ${} внутри `` скобочек было добавлено в ES6
        f(i, j);
    }
    str += "</tr>";
}

document.write(str);


//ES6: Подсветить ячейку
//ES6: Подсветить строку и столбец,
let table = document.querySelector(".table");
let tr    = table.querySelectorAll("tr");

let fillTdBackground = function(evt ,backgroundColor = null) { //Использование параметров по умолчанию
    let evtTargetCellIndex = evt.target.cellIndex;
    let evtTargetRowIndex = evt.target.parentElement.rowIndex;

    if(evt.target.tagName == "TD" && evtTargetRowIndex != 0 && evtTargetCellIndex != 0) {
        evt.target.style                         = `background-color: ${backgroundColor}`; // Использование ${} внутри `` скобочек
        tr[0].children[evtTargetCellIndex].style = `background-color: ${backgroundColor}`; // Использование ${} внутри `` скобочек
        tr[evtTargetRowIndex].children[0].style  = `background-color: ${backgroundColor}`; // Использование ${} внутри `` скобочек
    }
};

table.addEventListener("mouseover", function(evt) {
    fillTdBackground(evt, "#ff5151")
});

table.addEventListener("mouseout", function(evt) {
    fillTdBackground(evt)
});


//ES6: Calc
//ES6: Calc Live
let arrElements = [
    document.querySelector(".first-input"),
    document.querySelector(".second-input"),
    document.querySelector(".select"),
    document.querySelector(".result")
]

let [firstInput, secondInput, select, result] = arrElements; // Диструктуризация

let caltResult = function() {
    if(select.value == "+") {
        result.value = +firstInput.value + +secondInput.value;
    } else if(select.value == "-") {
        result.value = +firstInput.value - +secondInput.value
    } else if(select.value == "/") {
        result.value = +firstInput.value / +secondInput.value;
    } else {
        result.value = +firstInput.value * +secondInput.value;
    }
}

for(let element of arrElements) { // Использование for of
    element.addEventListener("input", function(){
        caltResult();
    });
};


//sort
var persons = [
    {name: "Иван", age: 17},
    {name: "Мария", age: 35},
    {name: "Алексей", age: 73},
    {name: "Яков", age: 12},
]

let mySort = function(arr, key, ascending = true) {
    arr.sort(function(a, b) {
        if(typeof(a[key]) == "string") {
            return ascending ? a[key].length - b[key].length : b[key].length - a[key].length;
        } else {
            return ascending ? a[key] - b[key] : b[key] - a[key];
        }
    });
};


//array map
let arr1 = ["1", {}, null, undefined, "500", 700].map(function(item){
    if(typeof(item) == "string") {
        item = +item;
    }

    return item
});


//array reduce
let arrayReduce = ["0", 5, 3, "string", null].reduce(function(previousItem, currentItem){
    if(typeof(currentItem) == "number") {
        previousItem = previousItem * currentItem;
    }

    return previousItem;
}, 1);

console.log(arrayReduce);


//object filter
var phone = {
    brand: "meizu",
    model: "m2",
    ram: 2,
    color: "black",
};

let filter = function(obj, f) {
    for(let key in obj) {
        if(!f(key, obj[key])) {
            delete obj[key];
        }
    }
};

filter(phone,(key,value) => key == "color" || value == 2);


//object map
let map = function(obj, f) {
    let newObj = {};
    
    for(let key in obj) {
        Object.assign(newObj, f(key, obj[key]))
    }

    return newObj;
};

console.log(
    map({name: "Иван", age: 17},function(key,value){
        var result = {};
        result[key+"_"] = value + "$";
        return result;
    })
)


//Рекурсия
//Sum
let sum = function(x) {
    return x == 1 ? 1 : x + sum(x - 1); 
}

console.log(sum(10));


//HTML Tree
{
    var someTree = {
        tagName: "table", //html tag
        children: [ //вложенные тэги
            {
                        tagName: "tr",
                        children: [
                            {
                                tagName: "td",
                                text: "some text",
                            },
                            {
                                tagName: "td",
                                text: "some text 2",
                            }
                        ]
            }
        ],
        attrs: 
        {
            border: 1,
        },
    }
    
    let str = "";
    
    let drawTreeHTML = function(obj) {
        str += `<${obj.tagName}>`;
        
        if("text" in obj) {
            str += `${obj.text}`;
        }
    
        if("children" in obj) {
            for(let child of obj.children) {
                drawTreeHTML(child);
            }
        }
    
        str += `</${obj.tagName}>`;
    }
    
    drawTreeHTML(someTree);

    document.write(str);
}