// my code
$(document).ready(() => {

    // Data
    let SkillData = [
        {
            "Profession": "Blacksmith",
            "Items": [
                ["ingot_iron", { "Level": 1, "Difficulty": 16, "Durability": 40, "Name": "Iron Ingot" }],
                ["ingot_iron", { "Level": 1, "Difficulty": 20, "Durability": 40, "Name": "Iron Ingot" }],
                ["ingot_iron", { "Level": 1, "Difficulty": 36, "Durability": 40, "Name": "Iron Ingot" }],
                ["ingot_iron", { "Level": 1, "Difficulty": 50, "Durability": 40, "Name": "Iron Ingot" }],
                ["ingot_iron", { "Level": 1, "Difficulty": 16, "Durability": 40, "Name": "Iron Ingot" }]
            ],
            "Image": "img/blacksmith.png"
        }
    ];

    let LoadItems = (id) => {
        str = '';
        let i = 0;
        SkillData[id].Items.forEach(job => {
           
            str +=
                `<div id="crafting-itemlist-item">
                    <div id = "crafting-itemlist-item-container">
                        <div id = "crafting-itemlist-item-container-box">
                        </div>
                    </div>
                    <p class="itemName" id = "${i}">${job[1].Name}</p>
                    <p class="itemLvl" id ="crafting-itemlist-item-text-level">Lv. ${job[1].Level}</p>
                </div>`;
            i++;
        });
        $('#crafting-itemlist').html(str);

        $('.itemName').click((d) => {
            console.log(`Checking item click for item: ${d.target.id}`);
            let num = d.target.id;
            let difficulty = (SkillData[id].Items[num][1].Difficulty);
            let durability = (SkillData[id].Items[num][1].Durability);
            let name = (SkillData[id].Items[num][1].Name);
            // let itempic = SkillData[id].Items[num][0];
            console.dir(`Difficulty: ${difficulty}`);
            console.dir(`Durability: ${durability}`);
            console.dir(`Name: ${name}`);
        });
    };
    LoadItems(0);
});

// Yam's code

function LoadItems(id) {
    Craft.CurrentSelection = id;

    let i = 0;
    $('#crafting-itemlist').html('')
    SkillData[id].Items.forEach(job => {
        var $thing = $('#crafting-itemlist-item').clone();
        $thing.html('<div id = "crafting-itemlist-item-container"> <div id = "crafting-itemlist-item-container-box"> <img src = "nui://geo-inventory/html/img/'+job[0]+'.png" id = "crafting-itemlist-item-container-box-pic"> </div> </div> <p id = "crafting-itemlist-item-text">'+job[1].Name+' </p> <p id = "crafting-itemlist-item-text-level">Lv. '+job[1].Level+' </p>')
        $thing.attr('ident', i)
        $('#crafting-itemlist').append($thing)
        $($thing).click(function() {
            let num = $(this).attr('ident')
            let difficulty = (SkillData[id].Items[num][1].Difficulty)
            let durability = (SkillData[id].Items[num][1].Durability)
            let name = (SkillData[id].Items[num][1].Name)
            let itempic = SkillData[id].Items[num][0]
            console.log(num)
        })
        i++
    })
}