import { parse } from 'https://cdn.jsdelivr.net/npm/csv-parse@5.5.6/+esm'

const rows = "abcdefghilmopqrst".split("")

const parse_csv = text => {
    return new Promise((resolve, reject) => {
        parse(text, (err, data) => {
            if (err) reject(err)
            else resolve(data)
        })
    })
}

const div = (className, innerText) => {
    const e = document.createElement("div")
    e.className = className
    if (innerText) e.innerText = innerText
    return e
}

async function on_content_loaded() {
    const all_data = await Promise.all(
        rows.map(
            row => fetch(`data/row_${row}.csv`)
                .then(x => x.text())
                .then(parse_csv)
        )
    )
    
    // const table = document.createElement("table")

    // for (const row in  all_data) {
    //     const row_data = all_data[row]
    //     const row_letter = rows[row]

    //     for (const element in row_data) {
    //         const tr = document.createElement("tr")

    //         for (const value in row_data[element]) {
    //             const td = document.createElement("td")
    //             td.innerText = row_data[element][value]
    //             tr.appendChild(td)
    //         }

    //         table.appendChild(tr)
    //     }
    // }

    // document.body.appendChild(table)

    const cards = all_data.map((row_data, i) => { 
        return {
            "name": `Row ${rows[i].toUpperCase()}`,
            "cards": row_data.slice(1).map((card_data, i) => {
                return {
                    "code": card_data[0],
                    "name": card_data[2],
                    "sigs": card_data.slice(3)
                }
            })
        }
    })

    let backplane = div("backplane")
    cards.map(row_data => {
        let row = div("row")

        let name = div("name", row_data.name)
        row.appendChild(name)

        let cards = div("cards")
        row.appendChild(cards)

        row_data.cards.map(card => {
            let card_div = div("card")
            card_div.appendChild(div("code", card.code))
            card_div.appendChild(div("name", card.name))

            let sigs = div("sigs")
            card.sigs
                .map((i, sig) => {
                    const s = sig || "\u00A0"
                    return div("sig", `${i} ${s}`)
                })
                .forEach(sig => sigs.appendChild(sig))
            card_div.appendChild(sigs)
            row.appendChild(card_div)
            return card_div
        })
            .forEach(card_div => cards.appendChild(card_div))

        return row
    })
        .forEach(row => backplane.appendChild(row))
    document.body.appendChild(backplane)
}

document.addEventListener("DOMContentLoaded", on_content_loaded)