function makeFilm(meta) {
    const file = document.getElementById("film-template").cloneNode(true)
    file.querySelector(".title").innerText = meta.title
    return file
}

function makeSeries(meta) {
    const file = document.getElementById("series-template").cloneNode(true)
    file.querySelector(".title").innerText = meta.title
    file.querySelector(".episodes .num").innerText = meta.episodes
    return file
}

function makeFile(meta) {
    let file
    switch (meta.type) {
        case "film":
            file = makeFilm(meta)
            break
        case "series":
            file = makeSeries(meta)
            break
        default:
            throw new Error(`Invalid file type '${meta.type}'`)
    }

    file.title = meta.filename
    file.id = null
    file.classList.remove("template")
    const url = new URL("/edit/", window.location.origin)
    url.searchParams.set("f", meta.filename)
    file.href = url.href
    return file
}

/**
 * 
 * @param {object[]} files 
 */
function addFiles(files) {
    const list = document.getElementById("files")
    list.innerHTML = ""
    const filenames = files.map(meta => meta.filename)
    // Copy array because sort changes it in place
    Array.from(filenames).sort().forEach(filename => {
        const i = filenames.indexOf(filename)
        const meta = files[i]
        const file = makeFile(meta)
        list.appendChild(file)
    })
}

window.addEventListener("load", () => {
    fetch("/api/files").then(res => {
        return res.json()
    }).then(files => {
        addFiles(files)
    })
})